JS:event对象下的target属性和取消冒泡事件

时间:2022-09-08 00:00:11

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 = &quot ...

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

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

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

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

随机推荐

  1. JS,CSS,HTML制作网页首页,视频轮播,隐藏点击等等。

    在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...

  2. poj 2369 Permutations 置换

    题目链接 给一个数列, 求这个数列置换成1, 2, 3....n需要多少次. 就是里面所有小的置换的长度的lcm. #include <iostream> #include <vec ...

  3. pandas 基础

    pandas 是基于 Numpy 构建的含有更高级数据结构和工具的数据分析包 类似于 Numpy 的核心是 ndarray,pandas 也是围绕着 Series 和 DataFrame 两个核心数据 ...

  4. Centos小白命令

    centos在登录界面无法输入密码 Centos安装flash插件 Centos挂载windows ntfs分区 Centos搭建Eclipse C/C++环境 windows下的txt文件在cent ...

  5. LeetCode解题录-51~100

    [leetcode]51. N-QueensN皇后    Backtracking Hard [leetcode]52. N-Queens II N皇后 Backtracking Hard [leet ...

  6. 采用Google预训bert实现中文NER任务

    本博文介绍用Google pre-training的bert(Bidirectional Encoder Representational from Transformers)做中文NER(Name ...

  7. python项目练习

    程序框图 (消费模块暂未写入) bin:程序执行 import os import sys base_dir = os.path.dirname(os.path.dirname(os.path.abs ...

  8. 计算机网络的服务质量&lpar;QoS&rpar;

    QoS入门,为了进一步学习DPDK上的QoS <计算机网络的服务质量(QoS)> 林闯,单志广,任丰原 著 Background Internet的传统分组交换网络是面向非实时数据通信而设 ...

  9. codevs 3160 最长公共子串

    3160 最长公共子串 http://codevs.cn/problem/3160/  时间限制: 2 s  空间限制: 128000 KB   题目描述 Description 给出两个由小写字母组 ...

  10. bytes 与 str的区别以及装换

    bytes 和 str 的区别: bytes 存储字节( 通常值在 range(0, 256)) str 存储unicode字符( 通常值在0~65535) bytes 与 str 的转换 编码(en ...