简单的小广告

规则:
每隔5秒在右下角弹出小广告
点击小广告跳转
点击小广告上的×关闭小广告,但5秒后小广告重新出现
若不点击小广告,10秒后小广告自动消失,但5秒后小广告重新出现

效果

所用知识点:
创建事件监听 addEventListener || attachEvent
事件绑定函数 addEvent(ele, type, fn)

现代浏览器

oDiv1.addEventListener('click', function () {console.log(999);})

IE浏览器

  oDiv3.attachEvent('onclick', function() {})

解决兼容问题

function addEvent(ele, event, fn) {if (ele.addEventListener) {ele.addEventListener(event, fn)} else {ele.attachEvent('on' + event, fn)}}addEvent(oDiv3, 'click', function () {console.log('sqada');})

事件流：事件流描述的是从页面中接受事件的顺序
但是，微软（IE）和网景（Netscape）开发团队提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)

事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

阻止事件冒泡:

 oClose.onclick = function(e) {var ev = event || e;if(ev.stopPropagation) {ev.stopPropagation();} else {ev.cancelBubble = true;}oAd.style.display = 'none';}

stopPropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。
不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

计时器

setInterval(function(){count();},1000)

每隔1000ms执行一次count函数

clearInterval() 停止setInterval方法

延时器

  function say() {alert("aaa");timer = setTimeout(function () {say();}, 1000);}

取消延时clearTimeout(timer);

代码:

      

 广告10s后关闭x

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！