<!DOCTYPE html>
<html>
<head>
<title>测试DOM</title>
<meta charset="utf-8"/>
<style type="text/css">
#myid li:nth-child(2n+1){
height:20px;
background-color: red;
}
</style>
<script type="text/javascript">
function addEvent (obj,eventType,callfunction,useCapture) {
var event = window.event || event;
if(window.addEventListener){
// '||'运算符的好处可以用来作默认值
var mycap=useCapture || false;
obj.addEventListener(eventType,callfunction,useCapture);
}else{
obj.attachEvent("on"+eventType,callfunction);
}
}
window.onload = function (){
var parentLi=document.getElementById("myid");
addEvent(parentLi,"click",function(){
var target = event.srcElement||event.targetElement;
if(target.nodeName=="LI"){
alert(target.innerHTML);
}
},true);
}
</script>
</head>
<body>
<ul id="myid">
<span>sdfsdf</span>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
<li id="8">8</li>
<li id="9">9</li>
</ul>
</body>
</html>
分享到：
相关推荐
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
2.DOM0级事件处理程序。 把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势。 3.DOM2级事件处理程序。 （1）用于处理制定和删除事件处理程序的操作。 addEventListener（处理的事件...
比如DOM事件，jquery框架帮我们为我们封装和抽象了各浏览器的差异行为，为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化，我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心，...
在项目开发时，我们时常需要考虑用户...DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。如下图所示： 有人可能会问，为什么
在DOM事件的深入浅出（一）中，我主要给大家讲解了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要侧重于DOM事件中Event对象的属性和方法。 那么...
javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。 方式1：...
前言 最近在研究react、redux等，网上找...捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡 | A —————–|–|—————– | Parent | |
preact-dom-delegate实现 preact 的 dom 事件委托只支持 preact 8，Preact X 可以使用安装$ npm i -S preact-dom-delegate使用说明在 JSX DOM 上设置 on 属性，值为委托处理方法，该方法会传入一个委托对象 delegate...
描述： 防止事件冒泡到DOM树上，也就是不... Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；元素上的事件
随时可以添加子元素，添加的子元素会自动有相应的处理事件。 2.事件委托的原理 事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。 举个例子：页面上有...
第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个...2-2 DOM0级事件处理程序 //较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多; //优点:简单/跨浏览器; <input ty
其实思路很简单，web标准中定义了一系列API接口，其中dispatchEvent允许我们向一个指定的事件目标派发一个事件，而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规则的(包括事件捕获和可选的冒泡过程)...
这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡，而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获。 DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序，既可以在...
1.3 DOM事件流 ：事件捕获阶段——事件目标阶段——事件冒泡阶段 DOM2级事件规定 ：捕获阶段不会涉及目标事件。 2.事件处理程序 事件 ：用户或者浏览器自身执行的 某种动作 事件处理程序 ：响应某个事件的 函数 。 ...
3：阻止合成事件，往处理document上的其他原生事件冒泡，需要通过e.target来判断，示例代码如下。 import React,{ Component } from 'react'; import ReactDOM,{findDOMNode} from 'react-dom'; class Counter ...
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。 而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中）...
可以用来操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax等。 优点： a、轻量级 b、具有强大的选择器 c、封装了大量的DOM操作 d、事件处理机制相当可靠 e、完善的Ajax f、不污染顶级变量 g、出色的...
DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 大多数情况下都是将事件处理程序添加到事件流的冒泡阶段。一个 EventUtil 的栗子： var EventUtil = { addHandler: function...
在aftercopy事件处理程序全部被触发或停止之后， click事件也会冒泡。 先决条件 ZeroClipboard需要使用Flash Player 11.0.0或更高版本。 有关基础机制的更多详细信息，请参见 。 通过ZeroClipboard v2.x的智能默认...