JavaScript超强速成计划（二）【（杂项详解：JS操作HTML 与 CSS、异常、事件）!】（学习笔记）

文章目录

JavaScript 对 HTML 与 CSS 操作（简单介绍，对象部分详细讲解）
对元素的事件监听
异常处理机制
常用事件
事件处理的几种方式
事件参数 event 的用法

1.JavaScript 对 HTML 与 CSS 操作

js 可以对界面上的元素进行访问，当然也可以改变元素的内容

js如何对 html的访问

①先准备如下两个元素：

<a id="aid" href="http://www.baidu.com">dasds</a>
<p id="pid">Hello</p>

效果如下所示：
在这里插入图片描述

②当我们点击一个按钮的时候，就改变 a元素中的索引地方，改变 p元素中的内容，代码实现如下所示：

<button onclick="demo()">点我</button>
<script>
    // html
    function demo(){
        document.getElementById("pid").innerHTML = "World";
        document.getElementById("aid").href = "https://blog.csdn.net/weixin_42100963";        
    }
</script>

其中，我们通过 getElementById 这个方式获取到指定id的元素，然后将其对应的属性进行改变 . . .

最终效果如下所示：

在这里插入图片描述

js 对 css 的访问

①首先，我们准备一个 css样式给 div，这样我们能明显的看出效果，如下所示：

.div{
    width: 300px;
    height: 300px;
    background-color: aqua;
 }

div 如下所示：

<div id="divid" class="div">
    langzihuameng
</div>

我们需要做的就是按下一个按钮，然后改变 div的背景，与其中字体的颜色：

<button onclick="demo()">点我</button>

<script>
// css
function demo(){
    document.getElementById("divid").style.background = "red";
    document.getElementById("divid").style.color = "yellow";       
}
</script>

效果如下所示：
在这里插入图片描述

2.对元素的事件监听

使用事件监听添加事件，有着许多的好处，比如我们需要将事件处理器换一个名字，只需要改变一个地方就可以了，而且，我们可以为一个事件，添加多个事件处理器 . . .

如下所示（没有使用事件监听）：

<button id="bid">点击</button>

<script>
    var v = document.getElementById("bid");

    // 给按钮添加一个事件 
    v.onclick = function(){Hello()};
    v.onclick = function(){World()};
        
    function Hello(){
        alert("Hello");
    }

    function World(){
        alert("World");
    }

</script>

效果如下所示：
在这里插入图片描述

我们发现只弹出一个框框，因为后面的那个方法将前面的那个方法覆盖掉了，所以这也是一种缺点，所以我们的事件监听，就派上用场了，如下所示：

<button id="bid">点击</button>

<script>
var v = document.getElementById("bid");

// 给按钮添加一个事件监听
v.addEventListener("click", Hello);
v.addEventListener("click", World);
        
function Hello(){
    alert("Hello");

    // 取消对事件的监听
    v.removeEventListener("click",Hello);
}

function World(){
    alert("World");

    v.removeEventListener("click",World);
}

</script>

效果如下所示：
在这里插入图片描述

当我们点击按钮之后，就不能再点击按钮了，因为我们调用了removeEventListener 方法，取消了对事件的监听 . . .

3.异常处理机制

异常处理机制是非常重要的一个部分。

首先我们准备一个文本框和一个按钮，按下按钮时，判断文本框中是否有内容，如果没有，则引发异常进行处理：

<input id="txt" type="text">
<input id="btn" type="button" value="按钮" onclick="unusual()">

unusual（）方法如下所示：

<script>
   function unusual(){
      var v = document.getElementById("txt");
      try{
           if(v.value == ""){
                throw "请在输入框输入一个值";  //引发异常
           }else{
              alert("您的输入框中已经有值啦！");
           }
       }
       catch(err){      //捕获异常
            alert(err);
       }
   }
</script>

效果如下所示：

4.常用事件

我们有许多常用的事件，比如：点击、移动、加载等等，掌握这些常用的事件对于我们来说是至关重要的事。

常用的事件如下所示：

事件-------描述

onclick	单机事件
onMouseOver	鼠标经过事件
onMouseOut	鼠标移出事件
onChange	文本内容改变事件
onSelect	文本框选中事件
onFocus	光标聚集事件
onBlur	移开光标事件
onLoad	网页加载事件

onclick点击事件（点击按钮改变其中的内容）

<button onclick="change(this)">Hello</button>
<script>
    function change(obj){
        obj.innerHTML = "huameng";
    }
</script>

效果如下所示：
在这里插入图片描述

注意：方法中的this参数，表示的是将button作为参数进行传送

onMouseOver/onMouseOut鼠标进入与移开事件（一个区域，进入和离开都改变其中的内容）

　　　代码如下:　

<div class="oneBox" onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
<script>
  function onOver(obj){
      obj.innerHTML = "Hello";
  }
  function onOut(obj){
       obj,innerHTML = "world";
  }
</script>
<style>

.oneBox{
    width:100px;
    height:100px;
    background:red;  
}

</style>

onChange

<input type="text" onchange="alert('你的内容被改变了？'+ this.value)">

效果如下所示：
在这里插入图片描述

onSelect/onFocus/onBlur文本框内容选中事件、光标聚集事件、光标离开事件

<input type="text" onselect="demo1(this)" onfocus="demo2(this)" onblur="demo3(this)">
<script>
      function demo1(obj){
          obj.style.background = "red";
      }
      function demo2(obj){
          obj.style.background = "yellow";
      }
       function demo3(obj){
           obj.style.background = "green";
       }
</script>

效果如下所示：
在这里插入图片描述

onLoad网页加载事件（此事件比较重要，当网页加载时做的一些事情）

<body onload="loadEvent()">

</body>

<script>
    function loadEvent(){
         alert("网页现在已经加载完成了！")
    }
</script>

效果如下所示：
在这里插入图片描述

5.事件处理的几种方式

添加事件处理一共有如下四种方式：

1.HTML事件处理：直接添加到HTML结构中。

2.DOM 0级事件处理：把一个函数赋值给一个事件处理程序属性。

3.DOM 2级事件处理：

　　addEventListenter("事件名","事件处理函数","布尔值")

true:事件捕获

false:事件冒泡

removeEventListener();

4.IE事件处理程序

attachEvent、detachEvent

1.HTML事件处理：直接添加到HTML结构中。

<button onclick="addhtml()">button</button>

<script>
     function addhtml(){
         alert("Hello")
     }
</script>

效果如下所示：
在这里插入图片描述

2.DOM 0级事件处理：把一个函数赋值给一个事件处理程序属性。

<button id="btn">按钮1</button>

<script>
    var v = document.getElementById("btn");
     //这个方法会被覆盖掉
    v.onclick = function(){
         alert("Hello");
    }
    v.onclick = function(){
         alert("World");
    }
</script>

　　　　效果如下所示：

在这里插入图片描述　　

3.DOM 2级事件处理：

　　addEventListenter("事件名","事件处理函数","布尔值")

true:事件捕获

false:事件冒泡

removeEventListener();

　最常用的方法，点击按钮时弹出三个框，只能弹一次。

<button id="btn">按钮按钮<bbutton>
<script>
     //DOM2级事件   使用事件监听器
     var v = document.getElementById("btn")
     v.addEventListenter("click",demo1);
     v.addEventListenter("click",demo2);
     v.addEventListenter("click",demo3);

     function demo1(){
         alert("11111");
          v.removeEventListener("click",demo1);
     }
 
     function demo1(){
         alert("22222");
          v.removeEventListener("click",demo2);
     }

     function demo1(){
         alert("3333");
          v.removeEventListener("click",demo3);
     }
</script>

　　　　效果如下所示：

在这里插入图片描述

4.IE事件处理程序

attachEvent、detachEvent

6.事件参数 event 的用法

div 如下所示：

<div id="divid" class="div">
	langzihuameng
</div>

我们需要做的就是按下一个按钮，然后改变 div的背景，与其中字体的颜色：

posted @ 2020-08-18 14:19 小那阅读(193) 评论(0) 编辑收藏举报

刷新页面返回顶部

那小白踩坑路

JavaScript超强速成计划（二）【（杂项详解：JS操作HTML 与 CSS、异常、事件）!】（学习笔记）

文章目录

1.JavaScript 对 HTML 与 CSS 操作

js如何对 html的访问

js 对 css 的访问

2.对元素的事件监听

3.异常处理机制

4.常用事件

5.事件处理的几种方式

6.事件参数 event 的用法

公告