[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获
-->事件监听
-->阻止事件传播
一、事件冒泡和捕获
1、概念：当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，点击子元素时，父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。
IE浏览器：事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确的对象(document)触发，即事件冒泡
Netscape：事件从外向里发生，事件从最不精确的对象(document)开始触发，然后到最精确对象(target)触发，
即事件捕获
2、W3C标准将两者进行中和，在任何的W3C的事件模型中，
事件先进入捕获阶段，再进入冒泡阶段
3、一般的绑定事件方式
div1.onclick=function () {
alert('div被点击');
};
在一个支持W3C DOM的浏览器中，一般的绑定事件方式，采用的是事件冒泡方式
程序员可以选择绑定事件时采用事件捕获还是事件冒泡，
办法就是绑定事件时通过addEventListener( )方法
二、事件监听
1、支持W3C标准的浏览器在绑定事件时可以用addEventListener(type,fn,useCapture) 方法
参数：type----------事件类型，例：click
fn--------------事件处理函数
useCapture----布尔值true或false
( true表示事件捕获，false表示事件冒泡 )
为了兼容浏览器，第三个参数一般设置为false
事件监听：addEventListener(type,fn,useCapture)
事件移除：removeEventListener(type, fn, useCapture)
2、因为IE678只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法，IE提供了另一个函数:
attachEvent( type , fn )
参数：type---------事件类型，例：onclick
fn-------------事件处理函数
没有第三个参数
事件监听：attachEvent( type , fn )
事件移除：detachEvent( type , fn )
三、阻止事件传播
事件冒泡或事件捕获都有传播的特征
阻止事件传播的方法：
在W3C中使用 Event.stopPropagation();
在IE中使用 Event.cancelBubble=true;
var Event=ev||window.event;
if (Event.stopPropagation){
Event.stopPropagation();//非IE阻止事件传播
}else{
Event.cancelBubble=true;//IE阻止事件冒泡
}
四、阻止默认事件
var Event=ev||event;
if (Event.preventDefault) {
Event.preventDefault(); //非IE阻止默认事件
} else{
Event.returnValue=false; //IE阻止默认事件
};
return false; 代码中遇到立即停止执行，跳出正在执行的函数，相当于终止符，可以用来阻止默认事件
PS：注意使用位置，不能滥用
五、代码
组织事件传播示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件传播</title>
<style>
*{margin:0;padding:0;list-style: none;}
ul{width:500px;height:300px;background: #ccc;}
li{width:300px;height:150px;background: pink;}
p{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<ul>
<li>
<p></p>
</li>
</ul>
<script>
var ul=document.getElementsByTagName('ul')[0];
var li=document.getElementsByTagName('li')[0];
var p=document.getElementsByTagName('p')[0];
ul.onclick=function(){
alert('我是ul');
}
li.onclick=function(ev){
alert('我是li');
var e=window.event||ev;
if (e.stopPropagation) {//组织事件传播到父级
e.stopPropagation();
//非IE阻止事件传播(W3C)
} else {
e.cancelBubble=true;
//IE阻止事件传播(IE)
}
}
p.onclick=function(){
alert('我是p');
} </script>
</body>
</html>
自定义右击菜单练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
div{width:150px;height:300px;background: pink;display:none;position: absolute;}
span{color:red;}
</style>
</head>
<body>
<div>
<span>第一页</span>
<span>下一页</span>
<span>刷新</span>
</div>
<script>
var div=document.getElementsByTagName('div')[0];
document.oncontextmenu=function(ev){//菜单右击事件
div.style.display='block';
var e=window.event||ev;
if(e.preventDefault){//组织默认右击事件
e.preventDefault();
}else{
e.returnValue=false;
}
var winH=document.documentElement.clientHeight;
var winW=document.documentElement.clientWidth;
var divH=div.offsetHeight;
var divW=div.offsetWidth;
var x=e.clientX;
var y=e.clientY;
if (winH-y<divH) {
div.style.top=(y-divH)+'px';
} else {
div.style.top=y+'px';
}
if (winW-x<divW) {
div.style.left=(x-divW)+'px';
} else {
div.style.left=x+'px';
} }
</script>
</body>
</html>
[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播的更多相关文章
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- JS 中的事件绑定、事件监听、事件委托是什么？
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- 两种js监听滚轮事件的方式
前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...
- 使用 JS 关闭警告框及监听自定义事件（amaze ui）
使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...
- H5_0003：JS禁用调试，禁用右键，监听F12事件的方法
1,禁用调试 // 这个方法是防止恶意调试的 (function () { console["log"]("=============================== ...
- js 监听后退事件及跳转页面
//直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...
随机推荐
- ASP.NET Core 1.1 静态文件、路由、自定义中间件、身份验证简介
概述 之前写过一篇关于<ASP.NET Core 1.0 静态文件.路由.自定义中间件.身份验证简介>的文章,主要介绍了ASP.NET Core中StaticFile.Middleware ...
- 今天不谈技术，说说一些常用的软件~By 逆天
前端工具:http://www.cnblogs.com/dunitian/p/5640147.html 在线办公: http://word.baidu.com/welcome.html http ...
- Sql Server系列：存储过程
1 存储过程简介 存储过程是使用T-SQL代码编写的代码段.在存储过程中,可以声明变量.执行条件判断语句等其他编程功能.在MS SQL Server 2012中存储过程主要分三类:系统存储过程.自定义 ...
- Android实现对图片的缩放、剪切、旋转、存储
转载:http://www.cnblogs.com/jerehedu/p/4464870.html 一.问题描述: 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片 ...
- Web APi入门之移除XML格式（一）
前言 回头想来,没想到自己却坚持下来了,EntityFramework系列终于全部完成了,给自己点个赞先.本系列将着手于Web API,关于一些基础的介绍及定义就不再叙述,请参考园友们文章,非常详细, ...
- 浅谈web语义化
在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...
- 深入seajs源码系列三
入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个 ...
- ZOJ Problem Set - 1001 A + B Problem
ZOJ ACM题集,编译环境VC6.0 #include <stdio.h> int main() { int a,b; while(scanf("%d%d",& ...
- [python]CentOS 6下安装Python2.7
安装方法 如果在CentOS上自己编译安装过python2.7,使用过程中会发现有些标准库没有安装之类的问题. 逛别人博客的时候发现,一个便捷的方法:使用RHSCL的全称是Red Hat Softwa ...
- PHP CURL CURLOPT参数说明(curl_setopt)
CURLOPT_RETURNTRANSFER 选项: curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); 如果成功只将结果返回,不自动输出任何内容. 如果失败返回F ...