DOM操作-2

最新推荐文章于 2024-08-11 18:40:36 发布

清小福

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量152

点赞数

分类专栏：前段文章标签： javascript

本文链接：https://blog.csdn.net/qingxiaofu/article/details/106155886

版权

前段专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、HTML DOM 事件

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick = JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

1、onclick 点击事件

onclick = javascript

<!DOCTYPE html>
<html>
<body>
	<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：
οnclick="changetext(this)"
实例

<script>
  function changetext(id)
  {
      id.innerHTML="Ooops!";
  }
</script>
</head>
<body>
	<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<boby>
    <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
    <button id="myBtn">点这里</button>
    <script>
        document.getElementById("myBtn").onclick = function () {
            displayDate()
        };
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        };
    </script>
    <p id="demo"></p>
</boby>
</html>

阻止右键菜单默认行为：
在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单, 如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单

document.oncontextmenu = function(){
      console.log("右键被按下");
      return false;
}

不使用监听事件的停止传播(不再派发事件)

当标签进行嵌套时
event.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload = function () {
            var divOne = document.getElementById('divOne');
            var divTwo = document.getElementById('divTwo');
            divOne.onclick = function () {
                alert('点击了one');
            }

            divTwo.onclick = function (e) {
                alert('点击了two');
                e.stopPropagation();//停止时间的传播(不在派发事件)

            }
    </script>
</head>
<boby>
    <div id="divOne">one
        <div id="divTwo">two</div>
    </div>
</boby>
</html>

e是事件，在firefox中只能在事件现场使用window.event，所以只有把event传给函数使用。为了兼容FF和其它浏览器，一般会在函数里重新给e赋值：

e = window.event || e;

也就是说，如果window.event存在，则该浏览器支持直接使用window.event，否则就是不支持，不支持就使用传进来的e。

e是event，其中包含鼠标事件的各种信息

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

2、onload 和 onunload 事件

onload 事件会在页面或图像加载完成后立即发生。

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload(了解) 事件可用于处理 cookie。

onunload 关闭当前页面的操作时候的操作(了解)
实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
	<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
</html>

3、onchange 当文本框(input 或 textarea)内容改变且失去焦点后触发。

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例：输入小写字母变大写字母

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function upperCase() {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>
</head>
<body>
<input type="text" id="fname" onchange="upperCase()">
</body>
</html>

onselect：当用户选择文本框(input 或 textarea)中的内容触发

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function showMsg() {
            alert("你选择了一些文本！");
        }
    </script>
</head>
<body>
一些文本：<input type="text" value="请选中我！" onselect="showMsg()">
<p>函数 showMsg() 在输入字段中的文本被选中时触发。此函数显示一段消息。</p>
</body>
</html>

4、onfocus/onblur 获取焦点/失去焦点

输入框获取焦点的事件
实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function showMsg(x) {
            x.style.background="yellow";
        }
    </script>
</head>
<body>
输入你的名字：<input type="text" onfocus="showMsg(this)" onblur="this.style.background='red'">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
</body>
</html>

5、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function mOver(obj) {
            obj.innerHTML="Thank you"
        }
        function mOut(obj) {
            obj.innerHTML="Mouse Over Me"
        }
    </script>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
     style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me
</div>
</body>
</html>

onmouseenter 和 onmousele

事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
over 和 enter的区别

如果元素没有子元素的时候，效果完全一样
如果元素包含子元素，当由父元素进入子元素的时候，
over会继续触发
over实际上只要在跨越边界的时候，就会进行触发

onmousemove

鼠标移动
实例(包含了onmousemove onmouseenter. onmouseover)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        x = 0;
        y = 0;
        z = 0;

        function myMoveFunction() {
            document.getElementById("demo").innerHTML = z += 1;
        }

        function myEnterFunction() {
            document.getElementById("demo2").innerHTML = x += 1;
        }

        function myOverFunction() {
            document.getElementById("demo3").innerHTML = y += 1;
        }
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
            float: left;
            padding: 30px;
            text-align: center;
            background-color: lightgray;
        }

        p {
            background-color: white;
        }
    </style>
</head>
<body>
<h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发。 </p>
<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。</p>
<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>
</div>
<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">鼠标移动到我这!</span></p>
</div>
<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">鼠标移动到我这!</span></p>
</div>
</body>
</html>

6、onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p onmousedown="this.innerHTML='mousedown'" onmouseup="this.innerHTML='out了'">点击</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<h1 onclick="console.log(this)" onmousedown="console.log('over')" onmouseup="console.log('up')">点击文本!</h1>
</body>
</html>

7、事件对象 event(隐藏参数)

鼠标事件

clientX: 浏览器可视区域的x坐标
clientY: 浏览器可视区域的y坐标

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX: 浏览器内容区域的x坐标
pageY: 浏览器内容区域的y坐标

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

screenX: 显示器屏幕的x坐标
screenY: 显示器屏幕的y坐标

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
offsetY: 鼠标点击的元素位置距离元素上边界的y坐标
例如：

document.onmousedown= function(evt) {
       var e = evt ; 
       console.log(e.clientX + ',' + e.clientY); 
       console.log(e.screenX + ',' + e.screenY);
       console.log(e.pageX + “,” + e.pageY);
};

键盘事件

onkeydown 键盘按住不放会一直触发任意键
onkeypress 键盘按住不放会一直触发字符键
onkeyup：当用户释放键盘上的某个键触发。

keyCode属性

所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量…的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应.

document.onkeydown = function(evt) { 
      	var e = evt ;
      	console.log(e.keyCode);  //按任意键，得到相应的 keyCode 
	String.fromCharCode(e.keyCode) //获对应字符
};

注意: 大写字母或小写的编码相同, 都为大写字母。

字符编码: charCode属性

Firefox,Chrome和Safari的event对象支持charCode属性,只有按下字符键并且使用keypress事件时才会得到charCode,这个charCode的值和UniCode码对应,和keyCode也类似,但是charCode的字母区分大小写.(字符键:数字,字母(区分大小写),字符,空格,回车)
实例

document.onkeypress =function(evt) { 
      var e= evt ;
      console.log(e.charCode);
}

注：可以使用String.fromCharCode()将 Unicode编码转换成实际的字符

8、HTML DOM EventListener 事件监听

可以对一个element绑定多个同样的事件且不会被覆盖

addEventListener() 方法

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

实例：
在用户点击按钮时触发监听事件：

//使用函数名，来引用外部函数:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
    document.getElementById("myBtn").addEventListener("click", displayDate);

    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
</script>
</body>
</html>

//直接添加函数体
element.addEventListener("click", function(){ alert("Hello World!"); });

//不使用事件监听的情况
window.onload = function(){ 
 var btn = document.getElementById("myBtn"); 
 btn.onclick = function(){ 
  alert("第一个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第二个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第三个事件"); 
 } 
}
最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了

注意:不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。

清小福

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM操作-2

一、HTML DOM 事件对事件做出反应我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：onclick = JavaScriptHTML 事件的例子：当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交 HTML 表单时当用户触发按键时1、onclick 点击事件onclick = javascript&
复制链接

扫一扫

专栏目录