JS:event对象下的target属性和取消冒泡事件
1.target
通过获取DOM元素
var box = document.getElementById("box");
document.box.onclick = function(){
alert(123);//123
}
event对象下的target方法 :获取事件的目标,不用document.getElementById("box")即可获取目标;
但是target方法支持ie9以上的浏览器器,Chrome,ff,IE9以下的是不支持的。
//W3C下
document.onclick = function(evt){
var e = evt || window.event;
alert(e.target.tagName); // DIV ie7 下为undefind
}
//IE8不支持target方法,为此ie提供了srcElement方法。
document.onclick = function(evt){
var e = evt || window.event;
alert(typeof e.srcElement); //DIV
}
//兼容所有浏览器
function getTarget(evt){
var e = evt || window.event;
return e.target || e.srcElement;
}
document.onclick = function(evt){
alert(getTarget(evt));
}
2.冒泡事件
document.onclick = function () {
alert('document');
};
document.documentElement.onclick = function () {
alert('html');
};
document.body.onclick = function () {
alert('body');
};
document.getElementById("box").onclick = function(){
alert("div");
}
document.getElementsByTagName("input")[0].onclick =function(evt){
var e = evt || window.event;
//e.stopPropagation(); //取消冒泡事件(非IE7以下浏览器)
//e.cancelBubble = true; //IE7以下浏览器
setStopBubble(evt); //取消冒泡兼容所有 只会弹出 “input”,其他的不在弹出。
alert("input");
}
当点击button按钮之后,会依次弹出input> div> body> html> document,这是有冒泡事件造成的。
//取消冒泡事件 stopPropagation() /cancelBubble
//兼容所有浏览器
function setStopBubble(evt){
var e = evt || window.event;
typeof e.stopPropagation == "function" ? e.stopPropagation():e.cancelBubble = true;
}
JS:event对象下的target属性和取消冒泡事件的更多相关文章
- Event对象中的target属性和currentTarget属性的区别
先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...
- js Event对象
(事件阶段)Event Phases Event对象在event第一次触发的时候被创建出来,并且一直伴随着事件在DOM结构中流转的整个生命周期.event对象会被作为第一个参数传递给事件监听的回调函数 ...
- Js event对象offsetX,pageX,screenX,clientX详解
平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用. 检测相对于浏览器的位置:clientX和clientY 当鼠标事件发生时,鼠标相对于浏览器左上 ...
- js面对对象编程(二):属性和闭包
上篇博客中解说了一些js对象的基本概念和使用方法.这篇博客解说一下js属性方面的:公有属性.私有属性,特权方法. 假设学过java.公有属性.私有属性,特权方法(即能够訪问和设置私有属性的方法)一定非 ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- js原生子级元素阻止父级元素冒泡事件
<html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...
- js 为对象添加和删除属性
对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...
- js中对象如何添加新属性?
假如登陆需要用户.密码.是否记住密码,那么怎么定义一个对象保存这些信息 1)方法1:声明动态对象 添加属性 //创建obj对象 var obj = new Object(); //为对象添加动态属性 ...
- JS判断对象是否包含某个属性
1.使用hasOwnProperty()判断 hasOwnProperty方法的参数就是要判断的属性名称,当对象的属性存在时返回true,否则返回false. var obj = { name:'ja ...
随机推荐
- wind的R接口、况客RSDK学习,双冒号以及quantmod主题
本文主要参考:来自segmentfault上的FinanceR的专栏 https://segmentfault.com/a/1190000004580610 并自己对生疏不解之处做了补充和注释. 当然 ...
- 第2月第5天 arc invocation getReturnValue
http://blog.csdn.net/zengconggen/article/details/38024625
- C++删除目录和复制目录函数
BOOL DeleteFolder(LPCTSTR lpszPath) { SHFILEOPSTRUCT FileOp; ZeroMemory((void*)&FileOp,sizeof(SH ...
- 倾力总结40条常见的移动端Web页面问题解决方案
1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...
- Linux IO模式及 select、poll、epoll详解
linux的IO调度文章==> https://segmentfault.com/a/1190000003063859?hmsr=toutiao.io&utm_medium=toutia ...
- ffmpeg-20160822-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...
- 使用jquery实现单选框、多选框取消选中状态
function radioReset(){ /*方式一*/ /* var radios = $("input[type='radio']"); for (i=0; i<ra ...
- (2016弱校联盟十一专场10.3) D Parentheses
题目链接 把左括号看成A右括号看成B,推一下就行了.好久之前写的,推到最后发现是一个有规律的序列. #include <bits/stdc++.h> using namespace std ...
- IOS7开发~Xcode5制作framework
一.Framework 简介(Introduction to Framework Programming Guide) Mac OS X 扩展了 framework 的功能,让我们能够利用它来共享代码 ...
- 使用 CUDA范例精解通用GPU编程 配套程序的方法
用vs新建一个cuda的项目,然后将系统自动生成的那个.cu里头的内容,除了头文件引用外,全部替代成先有代码的内容. 然后程序就能跑了. 因为新建的是cuda的项目,所以所有的头文件和库的引用系统都会 ...