阿乐のBlog - aqingya.cn

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的时间触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应事件来处理事件。事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能。 target：target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t ...

JavaScript ---事件的委派

发表于2020-04-24|JavaScript|JavaScript| 条评论

为一个元素绑定多事件有两种方法：addEventListener（）和 attachEvent() addEventListener（） —IE8及以下不支持通过这个方法也可以为元素绑定响应函数参数： 1.事件的字符串，不要on 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener () 可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。 attachEvent() 在IE8中可以使用attachEvent()来绑定事件参数： 1.事件的字符串，要on。 2.回调函数。这个方法也可以同时为一个事件绑定多个处理函数。不同的是它是后绑定的先执行，执行顺序和addEventListener()相反。br 但是这样就出现了浏览器不兼容的问题，我们可以自己定义 ...

JavaScript中 --- 绑定多事件问题浏览器兼容性解决方法。

发表于2020-04-24|JavaScript|JavaScript| 条评论

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 3000px; } #box { width: 100px; he ...

JavaScript ---div跟随鼠标移动

发表于2020-04-23|庖丁解牛|JavaScript| 条评论

什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。方法一：使用带clear属性的空元素在浮动元素后使用一个空元素如``，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或来进行清理。优点：简单，代码少，浏览器兼容性好。缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。方法二：使用CSS的overflow属性给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。方法三：给浮动的元 ...

用CSS来解决“高度塌陷”问题（清除浮动）

发表于2020-04-23|CSS|CSS| 条评论

disabled 属性可设置或返回是否禁用 checkbox。语法：Object.disabled=true|falsetrue表示禁用 false表示可用 clientWidth clientHeight这两个属性都可以获取元素的可见高度和宽度会获取元素的宽度和高度，包括内容区和内边距 offsetWidth offsetHeight获取元素的整个宽度和高度，包括内容区和内边距，边框 scrollLeft 可以获取水平滚动条的距离scrollTop 可以获取垂直滚动条的距离 scrollWidth scrollHeight可以获取元素整个滚动区域的宽度和高度等式成立时表示垂直滚动条到达最底部Object.scrollHeight-Object.scrollTop==Object.clientHeight 等式成立时表示水平滚动条到达最右端当满足Object.scrollWidth-Object.scrollLeft==Object.clientWidth 1234567891011121314151617181920212223242526272829303132333435 ...

JavaScript---检测滚动条是否到底

发表于2020-04-23|庖丁解牛|JavaScript| 条评论

有两种方法：第一种：currentStyle 语法：元素.currentStyle.样式名他可以用来读取当前元素正在显示的样式如果当前元素没有设置该样式，则获取它的默认值 currentStyle只有在IE浏览器中支持，其他浏览器都不支持。第二种：getComputedStyle()方法 getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用需要两个参数第一个：要获取样式的元素第二个：可以传递一个伪元素，一般都传null 该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过对象.样式名来读取样式如果没有设置样式则会获取到真实的值，而不是默认值 ...

js中如何获取元素的当前显示样式----简单总结。

发表于2020-04-23|庖丁解牛|JavaScript| 条评论

正则表达式的思维导图：正则的捕获exec() exec() 方法用于检索字符串中的正则表达式的匹配。 1RegExpObject.exec(string) 参数描述 string 必需。要检索的字符串。返回值：返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。（1）懒惰性我们先看一个例子： 123456let reg = /\d+/let str = '112hello456world789' console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str)); 上述三个打印输出的都是一样的：我们可以发现，每次匹配到的结果都是相同的，而且索引index的值一直没变，始终指向第一次匹配到的字符串的起始位置，这就是正则的懒惰性，只匹配第一次匹配到的结果，不再向后匹配。怎么解决懒惰性问题呢？很容易，加个 ...

JavaScript中正则表达式的常用总结

发表于2020-04-20|正则表达式|正则表达式| 条评论

两者使用的目的：改变调用的函数体内部的this的指向。相同点：均是调用某对象的方法，格式：obj.函数名.call() call(obj,参数1，参数2）:两个参数,前者将代替Function类里this对象，后者（多个元素）作为参数传递给被调用的函数。 12345678910var foo = { name:"name1", logName:function(){ console.log(this.name); }}var bar={ name:"name2"};foo.logName.call(bar);//name2 apply（obj，[参数1，参数2]），同上，不同点是第二个参数是数组。（将数组的每个元素作为一个个参数传递给被调用的函数，性质与call（）方法一样）利用apply（）这一特性的一些小场景： 12345678910//求数组的最大值var arr = ...

细谈apply()与call()

发表于2020-04-17|JavaScript|JavaScript| 条评论

对象原型每一个对象都有一个内置的 proto 属性指向构造它的函数prototype属性. 而构造函数的prototype.constructor 则指向构造函数本生。一个对象的属性的寻找过程由以下几个部分组成: 寻找对象属性的数据描述符(writable, value)或存取描述符(getter, setter)，如果查询到了，则返回对应的值。如果查询不到，则进入第2步骤。寻找对象属性的值是否有被显示定义 (可以通过 Object.getOwnPropertyNames)检测，如果对象属性定义了，则返回定义的值。如果没有，则进入第3步骤。寻找对象的隐藏原型__proto__对象的属性，规则同1，2步骤。如果还未找到，则重复第3步骤，直到__proto__ 为null 为止。我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。 12345678910function Person() { //创建构造函数 } function MyClass() { //创建构造函 ...

JavaScript基础---原型对象概念详解(仔细理解一下)

发表于2020-04-15|JavaScript|JavaScript| 条评论

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。例子1： 123456function a(){ var user = "阿清"; console.log(this.user); //undefined console.log(this); //Window}a(); 按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被 ...

彻底理解js中this的指向，理解记忆，不用死记硬背。

发表于2020-04-14|JavaScript|JavaScript•this| 条评论

数据库加载中