html中button的事件如何实现

html中button的事件如何实现,第1张

事件属性button,是触发事件的时候,获取事件对象获取button的值判断,是按下了鼠标的哪个键。

1、首先创建一个名称为button的html文件,如下图所示。

2、在body中加入onmousedown事件,事件中加入自定义函数,函数中加入事件返回对象

3、接着加入一个p标签加入id,如下图所示。

4、然后创建一个自定义函数mybutton,如下图所示。

5、自定义函数中通过event。button属性获取整数值,并判断整数值来区分鼠标按键。

6、最后在浏览器中打开文件,在指定区域随意按下鼠标按键,查看结果。

1eventtype属性

该方法作用是可以获取到时间的类型。

2eventpreventDefault()方法

该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。

3eventstopPropagation()方法

该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。

4eventtarget属性

eventtarget属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。

5eventrelatedTarget属性

在标准DOM中,mouseover和mouseout所发生的元素可以通过eventtarget()方法来访问,相关元素是通过eventrelatedTarget属性来访问的。eventrelatedTarget属性在mouseover中相当于IE浏览器的eventfromElement属性,在mouseout中相当于IE浏览器的eventtoElement,jQuery对其进行了封装,使之能兼容各种浏览器。

6eventpageX/eventpageY属性

该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/eventy方法,而在Firefox浏览器中用eventpageX/eventpageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

7eventwhich属性

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。

8eventmetaKey属性

针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定eventmetaKey()方法为键盘事件中获取<ctrl>按键。

9eventoriginalEvent属性。

该方法的作用是指向原始的事件对象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

在移动端,用户每时每刻都在触发移动事件,比如触摸的事件,点击,长按,左右滑动的事件,手指缩放,等等。都是移动事件的对象。在pc端,我们的事件对象是和鼠标和键盘的事件处理监听等等。我们首先是要通过DOM0级和DOM二级来进行绑定事件处理对象。在绑定事件的时候,我们可以在事件的回调函数来进行传参进行事件对象的调用。也可以通过Window对象来调用。这样,可以在pc端兼容问题。var e = ev || event 在移动端,我们的移动事件对象,是通过在事件的回调函数中传参就可以了。这个是标准做法。我们通过事件对象,可以找到,我们需要的事件对象的坐标点。和具体的坐标。还有触发事件的对象,特别是在移动端的事件中,我们更需要事件对象的各种属性 ,来进行相关 *** 作。这个是与pc端不一样的地方。

移动端的事件的绑定方法是通过DOM二级来进行。DOM二级来绑定事件,有很多优势。可以绑定多个同样的事件。不会发生覆盖。其二是,在事件名可以绑定多个不一样的事件。这样,我们的移动端就采用了DOM二级来进行绑定事件。

emlentaddEventListen("事件名",function(ev){

// 具体要 *** 作的内容。

});

移动端的事件常见的是:touchstart   touchmove  touchend tap hold   drag  -----

都是通过DOM二级来进行绑定,这些事件。

我们来看看移动端的事件对象。我们可以通过事件对象下的targettouches 来找到我们需要的事件的相关方法和属性。而事件对象的targettouches是个类数组的结构,所以,我们如果是一个手指的触发的事件,我们需要通过数组的形式来进行访问具体的事件属性。写法如下:var touch  =  etargetTouches[0]; 这样,就可以通过这样的形式来进行拿到具体的属性和我们事件触发的具体的坐标值。

在touch下,有我们的需要的关键属性:

clientX:41343798828125        // 这是我们需要用到的,事件触发的元素的到视口的水平方向的距离。

clientY:28481298828125       //这是事件触发元素到视口的垂直方向的距离。

force:1

identifier:0

pageX:41343798828125

pageY:28481298828125

radiusX:3521875

radiusY:3521875

rotationAngle:0

screenX:424

screenY:237

target:保存的是触发事件元素。事件代理的通过来通过该属性获取的是触发事件对象。

以上就是关于html中button的事件如何实现全部的内容,包括:html中button的事件如何实现、jquery事件对象event有哪些属性和方法、文本框只能输入 A B C D JavaScript 要么 事件 大侠快帮我等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9434575.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存