2021-05-29

最新推荐文章于 2024-09-25 14:00:00 发布

qq_50825351

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量93

点赞数

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/qq_50825351/article/details/117385601

版权

JavaScript基础学习04（事件）

JavaScript里面有哪些事件呢?
鼠标事件（onMouseOver、onMouseOut）实例1：

<title>鼠标事件</title>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
</head>
<body onload="mgs()">
	<div class="div" onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
	//this一定要有，不能少

<script>
    function onOver(x) {
        x.innerHTML="hello";
    }

    function onOut(x) {
         x.innerHTML="world" ;
    }
</script>
<form action="">
    <input type="text" onchange="alert('hello，内容改变了吗？')">
    // οnchange="alert('hello.内容改变了吗？')"  
   等效于下面：
 // <input type="text" οnchange= "changedemo()" 
       // <script>
//function changedeom(){
   //  alret("hello，内容改变了吗？")
       // </script>
      <input type="tex οnselect="changetext(this)"  οnfοcus="changedeom02(this)">
    <script>
        function changetext(bg) {//onselect文本框选中事件
               bg.style.background="red";
        }
        function changedeom02(bg) {//onfocus光标聚集事件
             bg.style.background="blue";
        }
        function mgs() {
            alert("网页加载完毕！")
        }
    </script>
}
</form>

DOM操作HTML
1. 改变HTML输出流：
  
  注意：绝对不要在文档加载完成后使用document.write()。这会覆盖该文档
  
  2.寻找元素：
  
  通过id找到HTML元素
  
  通过标签找到HTML元素
  
  3.改变HTML内容：
  
  使用属性：innerHTML
  
  4.改变HTML属性：
  
  使用属性：attribute

实例2：

<body>
        <a href="http://www.baidu.com/" id="aid">hello</a>
        <img src="imge/1.gif" alt="#" id="imgid">
        <p  id="pid">world</p>
        <button onclick="demo()">按钮</button>
<script>
   function demo() {
        var ob=document.getElementById("aid");//通过id找到HTML元素
               ob.href="https://www.bilibili.com/video/BV1Mx411m7fdp=95&spm_id_from=pageDriver";
     	document.getElementById("imgid").src="imge/2.jpg"//使用属性：attribute
        var pp= document.getElementById("pid").innerHTML="WS";//使用属性：innerHTML
    }
</script>
</body>

4.DOM EventListener:

DOM EventListener:

方法：addEventListener();

removeEventListener();

addEventListener():

方法用于指定元素添加事件句柄

removeEventerListener():

移除方法添加的事件句柄

实例3：

<body>
        <button id="bt">按钮</button>
<script>
        var x=  document.getElementById("bt")
        x.addEventListener("click", hello)//添加hello
        x.addEventListener("click", world)
        x.removeEventListener("click", hello)//移除hello,移之后就不会弹出对话框了
        x.removeEventListener("click", world)
    function hello() {
        alert("hello");
    }
    function world() {
        alert("world");

    }

5.js事件详解 ——事件流

1.事件流：描述的是在页面中接受事件顺序

2.事件冒泡：由最具体的元素接受，然后逐级向上传播至最不具体的元素的节点（文档）

事件捕获：

最不具体的节点先接受事件，而是具体的节点应该是最后接受事件。比如在.html文件中由HTML标签到head标签依次逐级向内。

6.js事件详解——事件处理

HTML事件处理：

直接添加到HTML结构中

缺点：就是改动一个就要同时改动对应多个

DOM0级事件处理：

把一个函数赋值给一个事件处理程序属性

缺点：同时添加几个会把前面内容覆盖

DOM2级事件处理：

addEventListener(“事件名”，“事件处理函数”，“布尔值”);

true:事件捕获

flase:事件冒泡

removeEventListener();

优点：可以同时添加多个，不会被覆盖，而且改动位置不大

IE事件处理程序

attachEvent()

detachEvent()

HTML事件处理:

button id="btn" onclick="demo()" >按钮</button>
<script>
    var ra= document.getElementById("btn")
  function demo() {
      alert("hello")
  }//缺点：就是改动一个就要同时改动对应多个
</script>

DOM0级事件处理:（缺点：同时添加几个会把前面内容覆盖）

<button id="btn" >按钮</button>
<script>
    var btn1=document.getElementById("btn");
    btn1.onclick=function () {
    alert("world DOM0级事件处理01");
    }
    btn1.onclick=function () {
        alert("world DOM0级事件处理02");//02会把01覆盖掉
    }
    // btn1.οnclick=null;//清除当前事件儿
</script>

DOM2级事件处理：

<button id="btn" >按钮</button>
<script>
    var btn1=document.getElementById("btn");
    btn1.addEventListener("click", deom01);//addEventListener();添加事件
    btn1.addEventListener("click", demo02);
	btn1.removeEventListener("click", demo02);//removeEventListener()移除事件
    function deom01() {
        alert("helloDOM02级事件01");
    }
    function demo02() {
        alert("worldDom02级事件02");
    }
</script>

IE事件处理程序:

<button id="btn" >按钮</button>
<script>
    var btn1=document.getElementById("btn");
    if(btn1.addEventListener){//判断浏览器是否兼容DOM02级事件
        btn1.addEventListener("click", demo)
    }else if (btn1.attachEvent){//浏览器是否兼容
        btn1.attachEvent(onclick,demo())
    }else {
        btn1.onclick=demo();//DOM0级事件
    }
    function demo() {
      alert("hello")
    }
</script>

7.事件对象：

什么叫事件对象？

在触发DOM事件的时候都会产生一个对象
事件对象event：

1.type:获取事件类型

2.target:获取事件目标

3.stopPropagation():阻止事件冒泡

4.preventDefault():阻止事件默认行为

<div id="div">
    <button id="btn" >按钮</button>
    <a href="http//:www.baidu/" id="aid">网址</a>
</div>
<script>
    var btn1=document.getElementById("btn");
    btn1.addEventListener("click", ShowType);
    btn1.addEventListener("click",Showdiv )
  document.getElementById("aid").addEventListener("click", SowA);
    function ShowType(event) {
            // alert(event.type);//获取事件对象
            alert(event.target);//获取事件目标
            event.stopPropagation();//阻止事件冒泡
    }
    function Showdiv() {
        alert("div");
    }
    function SowA(event) {
        event.stopPropagation();
         event.preventDefault();//阻止事件默认行为
    }
    
</script>