天津网站建设教程,南京个人网站建设模板,网站建设实践收获,如何快速进行网站开发js事件一、绑定事件1、html绑定2、el属性绑定3、el函数绑定4、事件捕获与冒泡5、js常见事件称名二、阻止事件1、event.stopPropagation()2、return false3、event.preventDefault();4、兼容写法一、绑定事件
1、html绑定
div onclickalert(click!)click4、兼容写法一、绑定事件
1、html绑定
div onclickalert(click!)click/div2、el属性绑定
el.onclick (){alert(click!)
}3、el函数绑定
1el.addEventListener(eventName,cb,useCapture)
参数说明eventName事件名称这里的事件名称没有“ on ”如鼠标单击事件 clickcb处理事件的函数回调函数-不加双括号useCapture事件冒泡顺序默认是false从子-父依次冒泡触发反之为true则从父-子在捕获阶段就触发。
2attachEvent(eventName,cb) - 若需要兼容 IE8.0以下版本则用此代替
参数说明eventName事件名称这里的事件名称有“ on ”如鼠标单击事件 onclickcb处理事件的函数回调函数-不加双括号
4、事件捕获与冒泡
div onclickalert(click1!)div onclickalert(click2!)div onclickalert(click3!)click/div/div
/div点击click依次弹出 click 3、2、1即为默认的冒泡阶段触发事件 - 从子 - 父 若定义事件中useCapture第三个参数为true则依次弹出click1、2、3即为捕获阶段触发事件
5、js常见事件称名
js事件集
二、阻止事件
div onclickalert(click1!)div onclickalert(click2!)a hrefhttp://www.baidu.com onclickalert(click3!)click/a/div
/div1、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;
}
