js绑定事件和阻止事件

一、绑定事件

1、html绑定

<div onclick="alert('click!')">click</div>

2、el属性绑定

el.onclick = ()=>{
	alert("click!")
}

3、el函数绑定

1）el.addEventListener(eventName,cb,useCapture)

参数	说明
eventName	事件名称，这里的事件名称没有“ on ”，如鼠标单击事件 click
cb	处理事件的函数（回调函数-不加双括号）
useCapture	事件冒泡顺序，默认是false，从子->父，依次冒泡触发；反之为true则从父->子，在捕获阶段就触发。

2）attachEvent(eventName,cb) - 若需要兼容 IE8.0以下版本则用此代替

参数	说明
eventName	事件名称，这里的事件名称有“ on ”，如鼠标单击事件 onclick
cb	处理事件的函数（回调函数-不加双括号）

4、事件捕获与冒泡

<div onclick="alert('click1!')">
	<div onclick="alert('click2!')">
		<div onclick="alert('click3!')">click</div>
	</div>
</div>

点击click依次弹出 click 3、2、1，即为默认的冒泡阶段触发事件 - 从子 -> 父；
若定义事件中useCapture（第三个参数）为true，则依次弹出click1、2、3，即为捕获阶段触发事件

5、js常见事件称名

js事件集

二、阻止事件

<div onclick="alert('click1!')">
	<div onclick="alert('click2!')">
		<a href="http://www.baidu.com" onclick="alert('click3!')">click</a>
	</div>
</div>

1、event.stopPropagation()

事件中使用后，点击click不会弹出click3、2、1，但会跳转至百度；即阻止了事件冒泡行为，但不会阻止其默认行为

2、return false

若在事件中返回了 false
js中：
点击click会弹出click3、2、1，但不会跳转百度；即事件处理过程中，不阻击事件冒泡，但阻击默认行为
jQuery中：
点击click后什么都不会发生；即阻止了事件冒泡，也阻止了默认行为

3、event.preventDefault();

事件中使用后，点击click会弹出click3、2、1，但不会跳转百度；即事件处理过程中，不阻击事件冒泡，但阻击默认行为

4、兼容写法

需要阻击事件冒泡时

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

需要阻击事件默认行为时

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}