Event属性可以帮到你!!!
开发工具与关键技术:DreamWeaver Event属性
作者:听民谣的老猫
撰写时间:2019/1/16 15:30
在JavaScript学习过程中接触到的Event属性,在后期学习中对Event属性的简单使用和理解
你在前端学习过程中有想过鼠标点哪里某个div或者某张图片就出现在哪里,某个div或者某张图片跟着鼠标移动,通过按下某个键盘来达到你的某个想法???
Event属性可以帮到你!!!
每一个事件的触发会产生相应的事件对象(事件对象只有在事件发生时才会产生,手动创建是不存在的! ),Event属性。Event属性的作用是用来记录事件发生产生的一些相关信息。
那如何访问到Event属性?
<script>
window.onclick=function(e)
{
var e = event||window.event;(定义一个变量来获取事件对象,解决兼容性问题)
console.log(e);
};
</script>
如上代码,构建onclick事件,通过console.log()访问到onclick事件中相应Event属性值。(注意在事件函数外面是访问不到事件产生的Event属性值的) 在每一次触发事件都会产生相应Event属性值。
上面的图片就是通过console.log()访问到onclick事件中相应Event属性值,这些属性值包括事件被触发时,鼠标指针的垂直和水平坐标(clientY,clientX)。某个键盘按键被按下(onkeydown)…
合理的运用这些属性就可以简单实现你的一些小想法!!!
<div class="box" id="box"></div>
<script>
var box= document.getElementById("box");
window.onclick=function(e)
{
var e = event||window.event;
box.style.top=parseInt(e.clientY)-150+"px";
box.style.left=parseInt(e.clientX)-150+"px"
};
<-几行简单的代码就可以实现鼠标点哪div就在哪,试试?->
</script>
下面为各位看官奉上每个属性的描述:
属性 | 描述 |
---|---|
onabort | 图像的加载被中断。 |
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onerror | 在加载文档或图像时发生错误。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onload | 一张页面或一幅图像完成加载。 |
onmousedown | 鼠标按钮被按下。 |
onmousemove | 鼠标被移动。 |
onmouseout | 鼠标从某元素移开。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseup | 鼠标按键被松开。 |
onreset | 重置按钮被点击。 |
onresize | 窗口或框架被重新调整大小。 |
onselect | 文本被选中。 |
onsubmit | 确认按钮被点击。 |
onunload | 用户退出页面。 |
altKey | 返回当事件被触发时,“ALT” 是否被按下。 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
ctrlKey | 返回当事件被触发时,“CTRL” 键是否被按下。 |
metaKey | 返回当事件被触发时,“meta” 键是否被按下。 |
relatedTarget | 返回与事件的目标节点相关的节点。 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
shiftKey | 返回当事件被触发时,“SHIFT” 键是否被按下。 |
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target | 返回触发此事件的元素(事件的目标节点)。 |
timeStamp | 返回事件生成的日期和时间。 |
type | 返回当前 Event 对象表示的事件的名称。 |