JS DOM 事件

最新推荐文章于 2024-06-08 16:17:53 发布

scorpion喵喵

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量119

点赞数

文章标签： JS DOM

本文链接：https://blog.csdn.net/weixin_40133326/article/details/79875964

版权

什么是DOM事件？

文档或者浏览器窗口发生的一些特定的交互瞬间。

一些常用的鼠标事件

onclick   鼠标点击时触发
onload    页面加载时触发
onmouseover   鼠标滑过时触发
onmouseout    鼠标离开时触发
onfoucs    获得焦点
onblur     失去焦点
onchange   域的内容改变时触发

onmousedown   鼠标按钮在元素上按下时触发
onmousemove   鼠标指针移动时触发
onmouseup     鼠标松开时触发
onresize      调整浏览器窗口的大小
onscroll      拖动滚动条滚动时

1. HTML事件

直接在HTML元素标签内添加事件，执行脚本。

添加事件可以直接添加，也可以进行函数调用

<tag 事件名称="执行脚本"></tag>    在HTML元素上绑定事件

执行脚本可以是一个函数的调用

<1>函数中有自带的this ，this指向DOM元素的引用

<div class="btn" οnmοuseοver="函数名（this）">开始。</div>

<script>
function onmouseover(btn){
btn.style.background="red";
}

<2>可以传两个参数

<div class="btn" οnmοuseοver="函数名（this,'red'）">开始。</div>

<script>
function onmouseover(btn,bgcolor){
btn.style.background=bgcolor;
}

可以直接添加事件

<input type="button" value="弹出" οnclick="alert('我是按钮')">

2. 事件的绑定

<1>通过DOM获取HTML元素

<2>(获取的HTML元素).事件=执行脚本‘

匿名函数实现

<div class="clock" id="btn">锁定.</div>
<script>
var btn=document.getElementById("btn");    获取按钮
btn.οnclick=function(){                    绑定事件
this.className="unclock";
}

函数调用实现

<div class="clock" id="btn">锁定.</div>
<script>
var btn=document.getElementById("btn");    获取按钮
btn.οnclick=BTN;       千万不能写成BTN()
function BTN(){                    绑定事件
this.className="unclock";
}

3. 事件的类型

<1> onload 页面加载时触发

window.onload()=function( ){ } 页面全部加载完成后在执行脚本语言，脚本语言可以放在<head>里，也可放在<body>里面。

<2> onfocus 获得焦点

用于<input type="text/password/texttarea( 多标选项)">

<3> onblur 失去焦点

<4> onchange 域的内容改变是

实例：有一个下拉菜单，菜单中有设置好的颜色值，当我们点击哪个颜色时，相应的背景颜色就变成所对应的颜色

<body>
<select id="menu">
  <option>red.</option>
  <option>blue.</option>
  <option>white.</option>
</select>

<script>
window.οnlοad=function(){
//获取下拉菜单
var menu=document.getElementById("menu");
//绑定事件
menu.οnchange=function(){
//获取当前选中的值
var bgcolor=this.value;
//var bgcolor=menu.options[menu.selectdIndex].value;
if(bgcolor==" ") return;
document.body.style.background=bgcolor;
}

}
</script>
</body>

<5>. onsubmit 表单中的确认按钮被点击时触发，是加在表单上，而不是加在提交按钮上

<6>. onresize 调整窗口的大小

window.οnresize=function(){}

<7>. onscroll 拖动滚动条

window.οnscrοll=function(){}

4. 键盘事件VIP

onkeydown  按下键盘按钮
onleyress   按下一个的同时释放另一个
onkeyup     松开按钮
keyCode     返回以上三个事件触发时，按下键的值的字符代码或者键的代码

event : 事件的状态，如触发event对象的元素，鼠标位置以及状态等。

scorpion喵喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS DOM 事件

什么是DOM事件？文档或者浏览器窗口发生的一些特定的交互瞬间。一些常用的鼠标事件onclick 鼠标点击时触发onload 页面加载时触发onmouseover 鼠标滑过时触发onmouseout 鼠标离开时触发onfoucs 获得焦点onblur 失去焦点onchange 域的内容改变时触发onmousedown 鼠标按钮在元素上按下时...
复制链接

扫一扫