【前端】关于事件的代码片段

关于一些事件的代码片段：

var button = document.getElementById('button')
button.addEventListener('click', buttonClick);function buttonClick(e) {console.log("Button Clicked");document.getElementById('header-title').textContent = "Changed";document.querySelector('#main').style.backgroundColor = '#f4f4f4';console.log(e)console.log(e.target) // 拿到的是button对象console.log(e.target.id)console.log(e.target.className)console.log(e.type) // click事件console.log(e.clientX) //点击时X坐标console.log(e.clientY)console.log(e.altKey);console.log(e.ctrlKey);console.log(e.shiftKey);}var button = document.getElementById('button')
var box = document.getElementById('box')
var output = document.getElementById('output')var itemInput = document.querySelector('input[type="text"]');
var form = document.querySelector('form');var select = document.querySelector('select');itemInput.addEventListener('keydown', runEvent) // 输入框的响应事件：按键
itemInput.addEventListener('keyup', runEvent) // 键向上反弹事件
itemInput.addEventListener('keypress', runEvent) // 按键事件itemInput.addEventListener('focus', runEvent) // 输入框被点亮
itemInput.addEventListener('blur', runEvent) // 输入框失焦itemInput.addEventListener('cut', runEvent) // 从输入框剪切事件
itemInput.addEventListener('paste', runEvent) // 向输入框粘贴事件itemInput.addEventListener('input', runEvent) // 任何与输入相关的都是在这个事件类别内button.addEventListener('click', runEvent) // 点击事件
button.addEventListener('dblclick', runEvent) // 双击事件
button.addEventListener('mousedown', runEvent) // 鼠标按下事件
button.addEventListener('mouseup',runEvent) // 鼠标弹起事件
box.addEventListener('mouseenter',runEvent) // 鼠标进入区域
box.addEventListener('mouseleave',runEvent) // 鼠标离开区域
box.addEventListener('mouseover', runEvent) // 鼠标光临元素
box.addEventListener('mouseout', runEvent) // 鼠标离开元素
box.addEventListener('mousemove',runEvent) // 鼠标运动事件select.addEventListener('change', runEvent) // 选择新的选项会出发改变事件
select.addEventListener('input', runEvent) // 和change事件几乎一致form.addEventListener('submit', runEvent) // 表单的提交事件function runEvent(e) {e.preventDefault();// 禁止闪现特征console.log('EVENT TYPE: ', e.type);console.log(e.target.value)output.innerHTML = '<h3>MouseX: ' + e.offsetX + ' </h3><h3>MouseY: ' + e.offsetY + '</h3>'document.body.style.backgroundColor = "rgb("+e.offsetX+","+e.offsetY+",40)";
}

涉及到的事件几乎都是常用事件，用法也放在注释里了。

END.

【前端】关于事件的代码片段相关推荐

前端常用代码片段(四)
前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里前端常用代码片段(五) 点这里前端常用代码片段(六) 点这里 1.简述 ...
分享前端开发常用代码片段
分享开发中常用的一些代码片段,我们的目标是早下班.不加班,哈哈~~ 1.手机号隐藏中间4位 //手机号脱敏 function mobile(data) {return data.replace(/( ...
前端：分享一些实用的JS代码片段
今天给大家分享一些实用的JS代码片段,有需要的朋友欢迎收藏! 1.获取浏览器的版本 function getBrowser() {var UserAgent = navigator.userAgent ...
加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
vue源码中优秀代码片段（一）
一.前言笔者在读Vue源码时, 手记一些源码中优美的代码片段,一起来学习吧二.代码片段 1. makeMap 检测某值是否在字符串(逗号分隔的字符串)中存在, 运用了柯里化函数和缓存函数源码鉴赏 ...
985大学的高材生只会写代码片段，丢人吗？
很多同学在学习编程的时候都会遇到各种各样的难题,比如:没有合适的资料.学习过于碎片化.资料的质量层次不齐.看了很多视频自己动手时却还是不会.接触不到完整项目.无法检测自己的编程水平是不是企业所认可的- ...
C#程序员经常用到的10个实用代码片段
转载地址:http://www.codeceo.com/article/10-csharp-code-spinet.html 如果你是一个C#程序员,那么本文介绍的10个C#常用代码片段一定会给你带来 ...
JQuery常用的代码片段
2019独角兽企业重金招聘Python工程师标准>>> JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到.他简易的操作以及对各个浏览器的兼容性,被广大的开发者一致 ...

【前端】关于事件的代码片段

【前端】关于事件的代码片段相关推荐

最新文章

热门文章