事件委托,事件冒泡,禁止冒泡和默认事件

<ul>
    <li>1</li>
    <li>11</li>
    <li>111</li>
    <li>1111</li>
    <li>11111</li>
    <li>11111</li>
    <li>111111</li>
    <li>1111111</li>
    <li>11111111</li>
    <li>111111111</li>
</ul>
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e){//绑定点击事件
	var event = e || window.event;//做event兼容
	var target = event.target || event.srcElement;//做事件源兼容
	console.log(target.innerText);
}

原理:事件冒泡,捕获,先捕获后冒泡

事件冒泡:自下往上的触发事件//文档结构上 addEventListener("事件类型",处理函数,false)

事件捕获:自上往下的触发事件//文档结构上(ie不支持)addEventListener("事件类型",处理函数,true)


绑定事件的函数:

节点.addEventListener("事件类型",处理函数,false/true)//它可以绑定多个函数,绑定同一函数执行一次

节点.attachEvent("on+事件类型",处理函数)//仅限IE,它可以绑定多个函数,一样的也行并执行多次

解除事件:(如果绑定匿名函数则无法通过第一二中方法解除)

节点.事件.removeEventListener("事件类型",处理函数,false/true)

节点.detachEvent("on+事件类型",处理函数)

节点.类型 = null/false


取消冒泡:

event.stopPropagation()

event.cancelBubble = true,ie独有


阻止默认事件:(a标签的跳转和右击菜单)

reture false;

event.preventDefault();

evevt.return.Value = false;兼容ie

阅读更多
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭