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属性和取消冒泡事件的更多相关文章

  1. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  2. js Event对象

    (事件阶段)Event Phases Event对象在event第一次触发的时候被创建出来,并且一直伴随着事件在DOM结构中流转的整个生命周期.event对象会被作为第一个参数传递给事件监听的回调函数 ...

  3. Js event对象offsetX,pageX,screenX,clientX详解

       平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用.   检测相对于浏览器的位置:clientX和clientY     当鼠标事件发生时,鼠标相对于浏览器左上 ...

  4. js面对对象编程(二):属性和闭包

    上篇博客中解说了一些js对象的基本概念和使用方法.这篇博客解说一下js属性方面的:公有属性.私有属性,特权方法. 假设学过java.公有属性.私有属性,特权方法(即能够訪问和设置私有属性的方法)一定非 ...

  5. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

  6. js原生子级元素阻止父级元素冒泡事件

    <html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...

  7. js 为对象添加和删除属性

    对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...

  8. js中对象如何添加新属性?

    假如登陆需要用户.密码.是否记住密码,那么怎么定义一个对象保存这些信息 1)方法1:声明动态对象 添加属性 //创建obj对象 var obj = new Object(); //为对象添加动态属性 ...

  9. JS判断对象是否包含某个属性

    1.使用hasOwnProperty()判断 hasOwnProperty方法的参数就是要判断的属性名称,当对象的属性存在时返回true,否则返回false. var obj = { name:'ja ...

随机推荐

  1. wind的R接口、况客RSDK学习,双冒号以及quantmod主题

    本文主要参考:来自segmentfault上的FinanceR的专栏 https://segmentfault.com/a/1190000004580610 并自己对生疏不解之处做了补充和注释. 当然 ...

  2. 第2月第5天 arc invocation getReturnValue

    http://blog.csdn.net/zengconggen/article/details/38024625

  3. C++删除目录和复制目录函数

    BOOL DeleteFolder(LPCTSTR lpszPath) { SHFILEOPSTRUCT FileOp; ZeroMemory((void*)&FileOp,sizeof(SH ...

  4. 倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  5. Linux IO模式及 select、poll、epoll详解

    linux的IO调度文章==> https://segmentfault.com/a/1190000003063859?hmsr=toutiao.io&utm_medium=toutia ...

  6. ffmpeg-20160822-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...

  7. 使用jquery实现单选框、多选框取消选中状态

    function radioReset(){ /*方式一*/ /* var radios = $("input[type='radio']"); for (i=0; i<ra ...

  8. (2016弱校联盟十一专场10.3) D Parentheses

    题目链接 把左括号看成A右括号看成B,推一下就行了.好久之前写的,推到最后发现是一个有规律的序列. #include <bits/stdc++.h> using namespace std ...

  9. IOS7开发~Xcode5制作framework

    一.Framework 简介(Introduction to Framework Programming Guide) Mac OS X 扩展了 framework 的功能,让我们能够利用它来共享代码 ...

  10. 使用 CUDA范例精解通用GPU编程 配套程序的方法

    用vs新建一个cuda的项目,然后将系统自动生成的那个.cu里头的内容,除了头文件引用外,全部替代成先有代码的内容. 然后程序就能跑了. 因为新建的是cuda的项目,所以所有的头文件和库的引用系统都会 ...