当前位置: 首页 > 编程日记 > 正文

js捕获和冒泡

面向对象:

1.单例模式

2.工厂模式

3.构造函数    (1,2,3的目的都是生成对象)

js天生自带的类  object(基类)

子类:function(函数)  array(数组)  number(数字)  math(数字)  string(字符串)  RegExp(正则)  Boolean(布尔)  date(日期)

1。事件对象

浏览器客户端的行为都称为事件

所有的事件都是天生自带的不需要我们去绑定,只需要我们去触发

通过obj.事件名=function(){}

事件名有:onclick(点击)  onmouseenter(鼠标进入)  onmouseover(鼠标悬浮)  onmouseleave(鼠标离开)  onfocus(表单聚焦)  onblur(失去焦点)  onmouseout(鼠标移除)  onmousemove(鼠标移动)  onmousedown(鼠标按下)  onmouseup(鼠标抬起)  onchange(表单内容修改)  onload(浏览器加载完成)  count(计数器)

当用户触发一个事件是,浏览器所有的详细信息都存在一个叫event的对象上,我们把他叫事件对象

如果没有写这个变量,直接输入变量,结果为undefined,那这个变量就是关键字

所有事件绑定一个方法,天生自带一个event的参数

鼠标的坐标:

event.clientX

event.clientY

event的兼容性

在chrome下event是undefined;

在ie低版本下是null       ie低版本又称非标准流:主要是针对ie9以下的低版本

火狐下会报错

所以event的最终解决办法(写法)

document.οnclick=function(e){

var e=e||window.event

}

事件冒泡机制

当给父元素的同一事件绑定方法时,触发了子元素身上的事件,执行完毕之后,也会触发父元素相同事件,这种传播机制叫事件冒泡;

取消事件冒泡:

event对象有个属性叫cancelBubble,默认值是false 改成true 就取消了当前冒泡

案例:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
        #a{
        width:500px;
        height:500px;
        background:red;
        }
        #b{
        width:300px;
        height:300px;
        background:blue;
        }
        #c{
        width:100px;
        height:100px;
        background:black;
        }
      </style>
    </head>
    <body>
      <div id="a">
        <div id="b">
          <div id="c">
  
           </div>
         </div>
      </div>
    </body>
  </html>
  <script>
    var a=document.getElementById("a")
    var b=document.getElementById("b")
    var c=document.getElementById("c")
    a.οnclick=function(){

    alert(10)
    }
    b.οnclick=function(){
      event.cancelBubble=true; //取消事件冒泡
      alert(20)
    }
    c.οnclick=function(){
      event.cancelBubble=true; //取消事件冒泡
      alert(30)
    }
  </script>

3.事件捕获

ie8及ie8以下没有事件捕获

给一个元素绑定事件,普通的写法是

obj.οnclick=function(){}

obj.οnclick=function(){}   (这就相当于给obj的onclick属性赋值一个道理,这种写法有一点不好,后者会将前面覆盖掉)

事件绑定的第二种写法

标准浏览器用  addEventListener()   这个方法;

ie低版本用  attachEvent()  这个方法;

addEventListener(参数1,参数2,参数3)

参数1,事件名  (去掉on)

参数2,事件函数

参数3,布尔值,代表捕获不捕获 默认false 不捕获但是冒泡

事件捕获(先触发父级,在触发子级)

1.ie低版本没有

2.普通事件绑定写法没有捕获

事件捕获

案例:

<script>
    var a=document.getElementById("a");
    var b=document.getElementById("b");
    var c=document.getElementById("c")

    a.addEventListener("click",function(){
      alert(10)
    },true);

    b.addEventListener("click",function(){
      alert(30)
    },true);
    c.addEventListener("click",function(){
      alert(50)
    },true);
  </script>

给父子元素用addEventListener() 绑定同一个事件,当触发子元素身上的事件,会先触发父元素然后在传递给子元素,这种传播机制叫事件捕获

(普通事件写法不存在事件捕获的)  (冒泡和铺获不能同时出现)

attachEvent() 和 addEventlistener() 两者的区别?

1. attachEvent 只用在IE8以下包括ie8;

addEventListener  只用在标准浏览器;

2.attachEvent 的事件名带on

addEventListener 事件名不带on

3.attachEvent 函数里面的this是window

addEventListener   函数里面的this是当前元素对象

4.attachEvent  只有冒泡,没有捕获

addEventListener  有冒泡也有捕获

4.call()和apply()

call和apply就是改变函数里面的this指向的方法   xxx.call() 或xxx.apply()

特别强调 xxx必须是function (普通函数,类,构造函数)

call只改变函数的 this

call()中第一个参数是null的时候,函数里的this还是指向原来的,不变

所有事件都是异步的

获取元素的另一种写法:

案例:

var $=function(idname){
    return document.getElementById(idname)
    }
  $("a").οnclick=function(){
    this.style.background="blue";
    }

转载于:https://www.cnblogs.com/diwangkaige/p/10055034.html

相关文章:

linux进程间通信:system V 信号量 生产者和消费者模型编程案例

生产者和消费者模型&#xff1a; 有若干个缓冲区&#xff0c;生产者不断向里填数据&#xff0c;消费者不断从中取数据两者不冲突的前提&#xff1a; 缓冲区有若干个&#xff0c;且是固定大小&#xff0c;生产者和消费者各有若干个生产者向缓冲区中填数据前需要判断缓冲区是否满…

mysql类exadata功能_几类关系型数据库的数据解决方案

今天聊下几类关系型数据库的数据解决方案,算是抛砖引玉&#xff0c;近期也要对技术方向上做一些扩展&#xff0c;也算是前期的小结吧。13Oracle目前市面上的主流版本应该还是11gR2&#xff0c;记得很多年前有个网站做过一次调查&#xff0c;10g&#xff0c;11g的版本比例差不多…

ZOJ 2723 Semi-Prime ||ZOJ 2060 Fibonacci Again 水水水!

两题水题&#xff1a; 1.如果一个数能被分解为两个素数的乘积&#xff0c;则称为Semi-Prime&#xff0c;给你一个数&#xff0c;让你判断是不是Semi-Prime数。 2.定义F(0) 7, F(1) 11, F(n) F(n-1) F(n-2) (n>2) 让你判断第n项是否能被3整除。 1.ZOJ 2723 Semi-Prime ht…

Lua中的基本函数库

基本函数库为Lua内置的函数库&#xff0c;不需要额外装载assert (v [, message])功能&#xff1a;相当于C的断言&#xff0c;参数&#xff1a;v&#xff1a;当表达式v为nil或false将触发错误,message&#xff1a;发生错误时返回的信息&#xff0c;默认为"assertion failed…

Oracle中的substr()函数 详解及应用

1&#xff09;substr函数格式 (俗称&#xff1a;字符截取函数) 格式1&#xff1a; substr(string string, int a, int b); 格式2&#xff1a;substr(string string, int a) ; 解释&#xff1a; 格式1&#xff1a; 1、string 需要截取的字符串 2、a 截取字符串…

linux进程间通信:POSIX 消息队列

文章目录基本介绍相关编程接口编程实例消息队列通信实例消息队列属性设置实例基本介绍 关于消息队列的基本介绍&#xff0c;前面在学习system V的消息队列时已经有过了解&#xff0c;linux进程间通信&#xff1a;system V消息队列 支持不同进程之间以消息&#xff08;message…

opencv 修改图像数值_opencv 修改图像数值_Python中使用OpenCV读取像素

如何在Python中遍历像素呢&#xff1f;请看代码&#xff1a;import numpy as npimport cv2import matplotlib.pyplot as pltsrc cv2.imread("src.png")gray cv2.cvtColor(src, cv2.COLOR_RGB2GRAY)rows, cols gray.shape[:2]row gray[200]plt.plot(row)# plt.sho…

SQL中返回一个字符串在另一个中存在的次数

ALTER FUNCTION [reg].[f_GetSameStringCntNoSort] ( str1 VARCHAR(100),--源字符串&#xff0c;取该串中的strLen长度的字符是否在目的字符串 str2 VARCHAR(100) --目的字符串 ) RETURNS INT AS BEGIN -- 返回的长度 DECLARE count INT DECLARE returnValue …

自由软件的自由

我相信我的订阅者中有很多是IT从业人员&#xff0c;我们在工作中会使用各种软件&#xff0c;除了微软、苹果等软件巨头的商业软件&#xff0c;还有更多的自由软件。我们使用这些软件构建自己的工作环境&#xff0c;为公司开发运营系统&#xff0c;为客户实现业务流程&#xff0…

c/c++ 拷贝控制 构造函数的问题

拷贝控制 构造函数的问题 问题1&#xff1a;下面①处的代码注释掉后&#xff0c;就编译不过&#xff0c;为什么&#xff1f;&#xff1f;&#xff1f; 问题2&#xff1a;但是把②处的也注释掉后&#xff0c;编译就过了&#xff0c;为什么&#xff1f;&#xff1f;&#xff1f; …

linux进程间通信:POSIX 消息队列 ----异步通信

在上一篇中linux进程间通信&#xff1a;POSIX 消息队列我们知道消息队列中在消息个数达到了队列所能承载的上限&#xff0c;就会发生消息的写阻塞。 阻塞式的通信影响系统效率&#xff0c;进程之间在通信收到阻塞时并不能去做其他事情&#xff0c;而是一直处于阻塞状态。 为了…

【转】Android设计中的.9.png

来源&#xff1a;http://isux.tencent.com/android-ui-9-png.html Android设计中的.9.png 注意&#xff1a;当使用9.png做TextView背景时&#xff0c;一定要设置内容区域&#xff08;底部和右侧&#xff09;&#xff0c;否则&#xff0c;文字显示不出来。 偶米伽 2013.08.20在A…

python创建scrapy_Python爬虫教程-31-创建 Scrapy 爬虫框架项目

首先说一下&#xff0c;本篇是在 Anaconda 环境下&#xff0c;所以如果没有安装 Anaconda 请先到官网下载安装Scrapy 爬虫框架项目的创建0.打开【cmd】1.进入你要使用的 Anaconda 环境1.环境名可以在【Pycharm】的【Settings】下【Project&#xff1a;】下找到2.使用命令&#…

KOAProgressBar

2019独角兽企业重金招聘Python工程师标准>>> KOAProgressBar 是 iOS 上的一个进度条控件&#xff0c;要求 iOS 5 支持 转载:http://www.adobex.com/ios/source/details/00000866.htm 转载于:https://my.oschina.net/u/868244/blog/106310

linux进程间通信:POSIX信号量

文章目录概念描述编程接口注意事项编程案例信号量基本接口使用案例信号量父子进程间通信信号量实现 两进程之间通信概念描述 英文&#xff1a;semaphore 简称SEM&#xff0c;主要用来进行进程间同步本质&#xff1a;内核维护的一个正整数&#xff0c;可对其进行各种/-操作分类…

指针小白:修改*p与p会对相应的地址的变量产生什么影响?各个变量指针的长度为多少?...

这两天敲代码碰到了一个这样的问题 代码如下&#xff1a; 1 #include <stdio.h>2 #include <stdlib.h>3 int main()4 {5 int num1 10;6 7 int* p&num1;8 *p 20;9 10 printf("%p\n", &num1); 11 printf("%d\…

MVC自带表单效验

废话不说&#xff0c;直接上代码&#xff0c;一看就明白 源地址&#xff1a;http://www.cnblogs.com/sixiangqimeng/p/3561313.html [StringLength(5,ErrorMessage "*长度小于5")][Required(ErrorMessage "*必填啊&#xff01;")][Required(ErrorMessage…

mysql求每个订单的平均价_MySQL – 选择所有客户和每个客户的总订单和总价值

SELECT a.ID,a.Name,COUNT(b.Customer) totalOrders,SUM(b.value) total_valueFROM Customers aLEFT JOIN Orders bON a.ID b.CustomerGROUP BY a.ID,a.Name要么SELECT a.ID,a.Name,COUNT(b.Customer) totalOrders,COALESCE(SUM(b.value), 0) total_valueFROM Customers aLEFT…

windows server 2008设置远程桌面连接最大数量

windows server 2008设置远程桌面连接最大数量 系统默认远程桌面连接的数量为1 打开控制面板---管理工具---远程桌面服务---远程桌面会话主机设置---把"限制每个用户只能进行一个会话"勾选去掉&#xff1b; 然后双击连接中的RDP-Tcp---网络适配器--最大连接数 修改为…

BZOJ1002 [FJOI2007]轮状病毒(最小生成树计数)

Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 7125 Solved: 3878[Submit][Status][Discuss]Description 轮状病毒有很多变种&#xff0c;所有轮状病毒的变种都是从一个轮状基产生的。一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的&#xff0c;2个原子之间的…

linux进程间通信:POSIX 共享内存

文章目录思维导图通信原理优势POSIX 共享内存 编程接口编程案例思维导图 之前学习过sysemV 的共享内存的实现及使用原理&#xff0c;参考linux进程间通信&#xff1a;system V 共享内存 POSIX 同样提供共享内存的接口&#xff0c;基本原理和system V的共享内存是一样的。 通信…

求二进制中1的个数(编程之美2.1)

行文脉络 解法一——除法解法二——移位解法三——高效移位解法四——查表扩展问题——异或后转化为该问题对于一个字节&#xff08;8bit&#xff09;的变量&#xff0c;求其二进制“1”的个数。例如6&#xff08;二进制0000 0110&#xff09;“1”的个数为2&#xff0c;要求算…

mysql管理用户数据库_MySQL 数据库管理(一)(用户与受权)

前言在企业信息化的过程当中&#xff0c;数据库中库和表都会大量存在&#xff0c;须要分配给管理者核实的权限进行操做合理地分配权限&#xff0c;可使数据库管理井井有理&#xff0c;各个管理者只须要关注本身负责的内容&#xff0c;也可避免误操做对系统形成损失1、用户与受权…

Smart-linkmonitor-link配置注意事项

一、应用场合 Smart Link用于双上行组网&#xff0c;Monitor Link一般用于与Smart Link的联动&#xff0c;配置在Smart Link的上游设备。 二、注意事项 在配置过程中&#xff0c;请注意以下几点&#xff1a; ? 1、指定实例之前请先配置MSTP实例。MSTP的实例和VLAN映射关系发生…

封装OpenCL类

以上一篇《OpenCL入门测试》为基础&#xff0c;将函数封装到类中&#xff0c;方便调用。 #include <cstdlib> #include <iostream> #include <iomanip> #include <cstring> #include <cassert> #include <windows.h> #define CL_USE_DEPRE…

linux系统调用 ftruncate设置文件大小

系统调用ftruncate可以将一个文件裁剪为指定的大小&#xff0c;函数描述如下&#xff1a; 头文件&#xff1a;<unistd.h> <sys/types.h>函数使用&#xff1a; int truncate(const char *path, off_t length); int ftruncate(int fd, off_t length);函数参数&…

剑指 offer set 22 数组中的逆序数

总结 1. 题目为归并排序的变形, 不过我完全没想到 2. 在归并排序进行字符组 merge 时, 统计逆序数. merge 后, 两个子数组是有序的了, 下次再 merge 的时候就能以 o(n) 的时间内找到某一个逆序对第二个元素的个数 转载于:https://www.cnblogs.com/xinsheng/p/3564026.html

qt信号发送间隔短而槽耗时多_Qt信号槽问题汇总 - osc_9q1dp3jk的个人空间 - OSCHINA - 中文开源技术交流社区...

1. 发送一次信号&#xff0c;调用多次槽函数问题在同一个类中&#xff0c;多次链接QObject::connect(sender, SIGNAL(signalSender(QString, int)), receiver, SLOT(onSignalSender(QString, int))); 会导致发送一次信号signalSender(QString, int) 多次调用槽函数(onSignalSen…

一劳永逸关闭Windwos默认共享

对于IPC$&#xff0c;找到注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\LSA下的RestrictAnonymous项&#xff0c;并将键值改为1。 对于其它默认共享&#xff0c;在注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\LanmanServer\Parameters下&#…

springboot 集成mybatis时日志输出

application.properties(yml)中配置的两种方式&#xff1a; 这两种方式的效果是一样的&#xff0c;但是下面一种可以指定某个包下的SQL打印出来&#xff0c;上面这个会全部的都会打印出来。 转载于:https://www.cnblogs.com/z0909y/p/10077565.html