JavaScript笔记12：控制CSS、事件、定时器

目录

 

js控制css

其他样式相关属性

事件的冒泡

事件的委派

绑定多个响应函数

单个：“对象.事件 = 函数”单个

多个：addEventListener()方法

多个：attachEvent()函数绑定

兼容所有浏览器的版本

事件的传播

滚轮事件

键盘事件

浏览器对象模型BOM

定时器

---

1. js控制css

// 语法：
元素.style.样式名 = 样式值

1. 注意：在CSS中的样式名如果含有“-”，则这种名称在JS中是不合法的。则这种名称需要修改为驼峰命名法（即去掉减号，把减号后的第一个字母改大写）

2. 通过style属性设置的样式都说内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往都会立即显示。但是如果在样式中写了!important，则此时样式会具有最高优先级，即使是通过js也不能进行覆盖，此时将会导致js样式失效。所以尽量不要使用！important

3. 通过style属性只能读取内联样式，无法读取样式表中的样式

// 获取元素的当前显示的样式
元素.currenStyle.样式名

1. 注意：currenStyle只有IE浏览器支持=

 // getComputedStyle()语法
 两个参数：
1、要获取样式的元素
2、可以传递一个伪元素，一般都是传null

 

var timer = setInterval(function(){
    console.log(num++);
}, 100)；

clearInterval()函数关闭一个定时器

 

 

clearInterval(timer);

setTimeout()函数延时调用

 

 

setTimeout(function(){
	console.log(num++);
},3000)；

 

 

1. 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式

2. getComputedStyle()是window的方法，可以直接使用

3. 两个参数：

   1. 要获取样式的元素

   2. 可以传递一个伪元素，一般都是传null

4. 该方法会返回一个对象，对象中封装了当前元素对应的样式

5. 可以通过“对象.样式名”来读取样式

6. 如果获取的样式没有设置值，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度

7. 注意：不支持IE8及以下的浏览器

8.  

    

   // 定义一个函数，用来获取指定元素的当前样式
   // 参数：1、obj：要获取样式的元素；2、name：要获取的样式名
   function getStyle(obj, name){
   	if(getComputedStyle){
   		return getComputedStyle(obj, null)[name];
   	}else{
   		return obj.currentStyle[name];
   	}
   }
   

    

9. 其他样式相关属性

   1. 我跳了……（110P）

10. 事件的冒泡

    1. 指定的是事件向上传导，当后代元素上的事件被接触时，其祖先元素的相同事件也会被触发

    2. 取消冒泡：将事件对象的cancelBubble属性设置为true即可取消冒泡

11. 事件的委派

    1. 事件的委派指的是将事件统一绑定给元素的共同祖先元素，这样后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

    2. 利用了事件的冒泡，通过委派可以减少绑定的次数，提高性能

12. 绑定多个响应函数

    1. 单个：“对象.事件 = 函数”单个

       1. 使用对象.事件 = 函数的形式绑定响应函数，只能同时为一个元素绑定一个响应函数

       2. 不能绑定多个，绑定多个时，最后一个会把前面的覆盖

    2. 多个：addEventListener()方法

       1. 通过这个方法可以为元素绑定多个响应函数

       2. 参数

          1. 事件的名称（字符串，不要on，如onclick写click即可）

          2. 回调函数，当事件出发时该函数会被调用

          3. 是否在捕获阶段触发事件，需要一个布尔值，一般传false

       3. false时，先绑定先执行；true时，先绑定后执行

       4. this是绑定事件的对象

       5. 不支持IE8及以下浏览器

13. 多个：attachEvent()函数绑定

    1. 后绑定先执行

    2. 在IE8及以下中使用

    3. this是window

    4. 参数：

       1. 事件名称，需要on

       2. 回调函数

    5.  

       btn01.attachEvent("onclick", function(){
       	alert(1);
       });
       

        

    6. 兼容所有浏览器的版本

       1. 参数：

          1. obj：要绑定事件的对象

          2. eventStr：事件的名称，字符串，不要on

          3. callback：回调函数

    7.  

       function bind(obj, eventStr, callback){
       	if(obj.addEventListener){
       		obj.addEventListener(eventStr, callback, false);
       	}else{
       		obj.attachEvent("on" + eventStr, function(){
       	    // 匿名函数中调用回调函数
       	    // 下面的方法可以把this从window改为调用对象
       	    callback.call(obj);
       });
       	}
       }
       

        

    8. 事件的传播

       1. 三个阶段：

          1. 捕获阶段:

             1. 在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件

             2. IE8及以下，没有捕获阶段

          2. 目标阶段:

             1. 事件捕获到目标，捕获结束开始在目标元素上触发

          3. 冒泡阶段：

             1. 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

14. 滚轮事件

    1. onmousewheel鼠标滚轮滚动事件

    2. event.wheelDelta 判断滚轮滚动的方向(正值是向上，负值是向下)

    3. 滚轮滚动时，如果浏览器的滚条随之滚动，这是浏览器的默认行为，可以通过return false来取消默认行为

15. 键盘事件

    1. 键盘事件：

       1. onkeydown：按键被按下，按下不放时事件会连续触发。连续触发时，第一次后会停顿一下，之后会很快执行下一次

       2. onkeyup：按键被松开

    2. 键盘事件一般会绑定给一些可以获取到焦点的对象，或者是document

    3. 四个属性：

       1. keyCode属性

          1. 可以通过keyCode属性来获取按键的编码，可以判断是哪个按键（注意：使用英文输入法，中文会一直是229）

       2. altkey

       3. ctrlkey

       4. shiftkey

       5. 这三个属性用来判断alt、ctrl、shift是否被按下，按下返回true，否则返回false

16. 浏览器对象模型BOM

    1. BOM可以是我们通过JS来操作浏览器

    2. BOM对象：

       1. window：

          1. 代表整个浏览器的窗口，同时也是网页中的全局对象

       2. Navigator：

          1. 代表当前浏览器的信息，通过该对象可以识别不同的浏览器

       3. Location：

          1. 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

          2. 直接打印location会打印出当前页面的完整路径

          3. 直接修改location属性的值为一个完整的路径，则页面会自动跳转到该路径，并生成相应的历史记录

          4. assign()方法：用来跳转到其他页面，效果个直接修改location的值一样

          5. reload()方法：刷新，重新加载当前页面

             1. 传入true时，会强制清空缓存刷新页面

          6. replace()方法：使用一个新页面替换当前页面，不会生成历史记录

       4. History

          1. 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

          2. 由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效

          3. lenght属性：可以获取当前访问的链接数量

          4. back()方法：可以用来回退到是一个页面

          5. forward()方法：可以用来跳转到下一个页面

          6. go()：可以跳转到指定的页面，需要一个整数作为参数

             1. 0是当前页面

             2. 正数是向前跳转n个页面

             3. 负数是向后跳转n个页面

       5. Screen

          1. 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息

17. 定时器

    1. setInterval()函数开启定时器

       1. 定时调用，每隔一段时间调用一次函数

       2. 参数：

          1. 回调函数，该函数会每隔一段时间被调用一次；

          2. 每次调用间隔的时间，单位是毫秒

       3. 返回值：

          1. 返回一个Number类型的数据，该数据作为该定时器的唯一标识

18. 1. clearInterval(计时器标识)用来关闭一个定时器

    2. 可以接受任意标识符，如果是有效定时器则停止，如果不是则没有效果

19. 1. 延长一段时间之后再调用函数执行，只执行一次