javascript事件冒泡实例分析_javascript技巧

本文实例讲述了javascript事件冒泡。分享给大家供大家参考。具体分析如下:

事件冒泡:
 
如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发,

触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p,

在p,td,tr,table中添加事件响应

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件冒泡</title>
</head>
<body onclick="alert('body click');">
  <table onclick="alert('table click');">
    <tr onclick="alert('tr click');">
      <td onclick="alert('td click');">
        <input type="button" value="单击我"
        onclick="alert('button click');" />
      </td>
    </tr>
  </table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
事件冒泡
javascript 事件冒泡、javascript冒泡排序、javascript 冒泡、javascript 阻止冒泡、javascript 防止冒泡,以便于您获取更多的相关知识。

时间: 2024-09-20 14:49:10

javascript事件冒泡实例分析_javascript技巧的相关文章

JavaScript事件委托实例分析_javascript技巧

本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体如下: var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) addEv

javascript事件冒泡实例分析

  本文实例讲述了javascript事件冒泡.分享给大家供大家参考.具体分析如下: 事件冒泡: 如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p, 在p,td,tr,table中添加事件响应 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html xmlns="htt

javascript中键盘事件用法实例分析_javascript技巧

本文实例分析了javascript中键盘事件用法.分享给大家供大家参考.具体如下: 键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; //论按下键盘上的哪个键,都将调用KeyDown()函数. DOM标准下 function keyDown(e) { var keycode = e.which; //取得对应的键值(数字) var realkey = S

JavaScript事件委托用法分析_javascript技巧

本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体分析如下: 一.点击页面任何部分触发事件 创建一个script1.js文件. 复制代码 代码如下: (function() {     eventUtility.addEvent(document, "click", function(evt) {         alert('hello');     }); }()); 页面部分. 复制代码 代码如下: <head> <meta http-e

Javascript闭包用法实例分析_javascript技巧

本文实例分析了Javascript闭包的概念及用法.分享给大家供大家参考.具体如下: 提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和组件或多或少用到了闭包. 所以,了解闭包是非常必要的.呵呵... 一.什么是闭包 简而言之,就是能够读取其他函数内部变量的函数. 由于JS变量作用域的特性,外部不能访问内部变量,内部可以外部变量. 二.使用场景 1. 实现私有成员. 2. 保护命名空间,避免污染全局变量. 3. 缓存变量

Javascript节点关系实例分析_javascript技巧

本文实例分析了Javascript的节点关系.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>节点关系</title> <script typ

javascript函数特点实例分析_javascript技巧

本文实例分析了javascript函数特点.分享给大家供大家参考.具体分析如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript函数特点(重要)</title>

javascript函数式编程实例分析_javascript技巧

本文实例讲述了javascript函数式编程.分享给大家供大家参考.具体分析如下: js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法: var data = [1,1,3,5,5]; var total = 0; for(var i = 0;i < data.length;i++)

javascript匿名函数实例分析_javascript技巧

本文实例讲述了javascript匿名函数的用法.分享给大家供大家参考.具体分析如下: 摘要: 本文讲解的是javascript最基础也是最重要的东西--函数,之所以写这篇文章,是因为面试的时候问到了,也算是温故而知新了. 先上个例子,如果你看懂了,说明你已经理解了本文要讲的. 复制代码 代码如下: var f = (function() {     function f() {return 10;}     return f();     function f() {return 20;}