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 ...
随机推荐
-
JS,CSS,HTML制作网页首页,视频轮播,隐藏点击等等。
在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...
-
poj 2369 Permutations 置换
题目链接 给一个数列, 求这个数列置换成1, 2, 3....n需要多少次. 就是里面所有小的置换的长度的lcm. #include <iostream> #include <vec ...
-
pandas 基础
pandas 是基于 Numpy 构建的含有更高级数据结构和工具的数据分析包 类似于 Numpy 的核心是 ndarray,pandas 也是围绕着 Series 和 DataFrame 两个核心数据 ...
-
Centos小白命令
centos在登录界面无法输入密码 Centos安装flash插件 Centos挂载windows ntfs分区 Centos搭建Eclipse C/C++环境 windows下的txt文件在cent ...
-
LeetCode解题录-51~100
[leetcode]51. N-QueensN皇后 Backtracking Hard [leetcode]52. N-Queens II N皇后 Backtracking Hard [leet ...
-
采用Google预训bert实现中文NER任务
本博文介绍用Google pre-training的bert(Bidirectional Encoder Representational from Transformers)做中文NER(Name ...
-
python项目练习
程序框图 (消费模块暂未写入) bin:程序执行 import os import sys base_dir = os.path.dirname(os.path.dirname(os.path.abs ...
-
计算机网络的服务质量(QoS)
QoS入门,为了进一步学习DPDK上的QoS <计算机网络的服务质量(QoS)> 林闯,单志广,任丰原 著 Background Internet的传统分组交换网络是面向非实时数据通信而设 ...
-
codevs 3160 最长公共子串
3160 最长公共子串 http://codevs.cn/problem/3160/ 时间限制: 2 s 空间限制: 128000 KB 题目描述 Description 给出两个由小写字母组 ...
-
bytes 与 str的区别以及装换
bytes 和 str 的区别: bytes 存储字节( 通常值在 range(0, 256)) str 存储unicode字符( 通常值在0~65535) bytes 与 str 的转换 编码(en ...