详解DOM元素和事件
程序员文章站
2022-04-04 15:41:57
...
什么是事件?
事件是指用户的行为或元素的状态。由指定元素监听相关的事件,并且绑定事件处理函数。
什么是事件处理函数?
元素监听事件,并在事件发生时自动执行的操作。
一、事件函数分类
1、鼠标事件
onclick //单击 ondblclick //双击 onmouseover //鼠标移入 onmouseout //鼠标移出 onmousemove //鼠标移动
2、文档或元素加载完毕:
onload //元素或文档加载完毕
3、表单控件状态监听:
onfocus //文本框获取焦点 onblur //文本框失去焦点 oninput //实时监听输入 onchange //两次输入内容发生变化时触发,或元素状态改变时触发 onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器
二、获取元素节点
1、根据标签名获取元素节点列表
var elems = document.getElementsByTagName(""); /*参数 : 标签名 返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。 */
2、根据 class 属性值获取元素节点列表
3、根据 id 属性值取元素节点
4、根据 name 属性值取元素列表
三、事件绑定方式
1、内联方式: 将事件名称作为标签属性绑定到元素上
例 :
<button onclick="alert()">点击</button>
2、动态绑定 :获取元素节点,动态添加事件
例 :
btn.onclick = function (){ };
推荐教程:js入门教程
以上就是详解DOM元素和事件的详细内容,更多请关注其它相关文章!
上一篇: PHP变量引用、函数引用、对象引用
下一篇: css怎么去掉颜色
推荐阅读
-
python信号量,条件变量和事件详解
-
详解jQuery的核心函数和事件处理
-
Yii框架组件和事件行为管理详解,yii行为管理_PHP教程
-
jQuery事件mouseover和mouseout在鼠标经过子元素时也会触发详解
-
javascript动态创建dom元素完整代码和使用详解
-
JavaScript操作DOM元素的childNodes和children区别_javascript技巧
-
js中delete元素和splice元素的区别详解
-
图文详解鼠标事件CSS:hover和JS:mouseover的区别
-
深入分析C#中处理和键盘相关事件的详解
-
详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法