00:00
接着我们来看一看下哈,几块当中的其他的事件处理方法都有哪一些,那么我们打开这个几块这个文档,你看事件处理器就这个栏目当中,下面这些都是这个前面这个是不是那个页面加载完之后完整的写法啊,就提一下刚刚说了哈,好,那么下面还有一些,咱们把这些很多啊常用的我们就说一下,比如说click咱们是不是特别常用啊,啊用的特别常用,那他们干嘛?它可以绑定单击事件以及触发单击事件。两件事情,一个是绑定,一个是处罚,咱们用的好像一直都是绑定是吧?来我给你演示一下,给你演示一下,呃,我们找到事件绑定这个地方带下划线的这个啊。我先把这东西删掉啊。
01:00
我运行起来拿上来看下吧,这个里面也很简单,一个div里面有个标,诶里边里面有个标题,大家看见吧,啊里面有个标题就是这个什么是几颗大家看就这插了哎,下面还有个div,这边也隐藏的啊给隐藏的好,那么大家注意,现在呢,我给这个H5啊绑定单机事件,那做法很简单呢,我是不是找到这个H5标签对象之后click click呀啊这就绑定了单机事件,这边他可说的用了好多次了,H单击事件a click方法绑定对吧?好,咱们稍微预警一下哈,刷新走这可以吧,没啥问题哈,好,那老师什么是处罚呀,大家注意看的哈,你传函数。
02:00
它绑定你调用的时候不传函数,它触发,那我给你演示一下啥情况,这有点听不懂对吧,别着急啊,一天好,咱们说按钮吧,我现在给这个按钮啊,绑上单机事件,别着急啊,我先绑上事件先啊这个绑事件是翻水,好大家注意看一下,现在我干一件什么事情呢?我让这个按钮点击的时候,我触发H5的单击事件。能看懂啥意思吗?你看啊,这上面是不是多个按钮啊,我现在点它让上面处罚怎么做呀,就我得先得到它,并且我调用这个click,我不传函数看见了吗?就是你看啊,传方的损是绑定时间,那么不罚对不罚三个损失处罚时间就相当于这个H5被点击了一次,能理解吗?啊来看一下哈,那现在我点它,他说H5是不是点击了犯罪事件呢?诶,这就是处罚了。
03:19
这就是属发了,哎,大家注意看下哈,像这种事件呢,有好多,这些事件都在哪里,你看都在事件这个位置,好多咱们原来讲GS讲过的事件都都能找到,但是呢,他们有一些不同的规律,就是什么,原来以前呢,我们是怎么做的呀,就是以前是不是on click呀,哎,现在就变成了click click啊以前是onl,现在呢就变成了L啊,以前是啊change,现在就变成了甚就没有这个啊能力了吗?然后把它变成一个函数去用了啊来,那你看到这边。
04:02
稍等啊。OK,你看到这边里面有block,看见吧,就按时间没趁着看见吧啊吗?这click单击嘛,下面还有好多哎,都是把那个on是不是去掉了,还有萨啊看见吧好多啊好多,大家如果感兴趣呢,就开看一下啊,那么我们再讲两个常用啊,因为这些使用都是一个规律,大家记住几块,它有个特点,同一类方法它的使用是完全一样的,就跟我们刚刚讲那个事件是不是也一样,动画是不是也一样,动画就第一个就是时长啊,第二个就回调了,是吧?啊他这个事件呢也一样,你看这个是鼠标移入事件啊。鼠标移入时间,下面这个呢,是鼠标移移出啊时间那记住啊,同样是可以用来绑定事件,也可以用来触发事件,能能理解吧,两个都是可以的,但一般我用来绑定比较多嘛,触发极少用哈,好,那我给你演示一下,那我把这个先做了,现在呢,诶我给这个A组啊绑定鼠标移入,呃,A组点mouse o不不是O是over啊好,好了,就是鼠标引入好,那这个档写什么东西呢?啊,不用alo alo容易出问题,叫做标打印一下就是你来了。
05:38
你进来了是吧,啊进来了,然后呢,鼠标一出是吧?哎,你出去了是吧。Out啊,就是你出去了啊,你出去了哈,好,那这个时候咱们来看一下哈,咱们运行一下它,走咱们去看看F12看控制台这个地方吧,其实果刚刚鼠标不小心已经滑过一次了嘞。
06:09
我现在进来他是不是处罚一次,我出去一他又来一次,看到吗?诶进来聊是有意思,那么接着呢,对又玩一天是吧?那接着呢,我们再来看一下啊,这个就是鼠标呢,一入一出了啊一入一出了使用跟前面那个click click没啥区别吧?啊那么接着我们再来看一下半,那半个能干吗?把可以给什么呢?这个元素一次性绑定多一个或多个事件。哎,它也很灵活,它是一次可以把一个和多个老给你演示哈,那现在我把这个就做掉啊,还是得做掉这颗我也做掉的,现在我换一种方法去给他绑定,就我说H5啊,然后跟他说B绑定一下,现在这个B是绑定好了,他只知道你要绑定,但他不知道你要绑定什么事件吧,所以你要告诉他什么事件呢?Click,然后后面跟那个函数,就它响应之后要做的操作能理解吗?好,那我们来打印一下。
07:23
说这是B绑定的时间,好来吧,我们刷新一下现在一点,它是不是也有效果,这是通过B的方式来绑定,当然我们也可以看文档,你要不会用,你看只会看文档啊,你看就是B在哪呀,Bbb打头把这个是吧,好你看啊,它是怎么用的,它是不是也是写成类型中写方数函数啊,对吧,你要是多个呢,是用空格隔开,看见了吗?多个的时候用空格隔开,那我们也是一样啊。
08:00
就看事例没,那事例最好看来,比如说我再摆一个叫做mouse over是吧?啊,这个时候我就不支持click事件了,就是说绑定的事件吧,可以吧啊那甚至出来也可以有叫做mouse out,就一次绑定了三个事情,你如果需要的话再空格再写,能理解吗?啊那我们再来刷新一下,你看啊进来是不是有一次啊,出去又加一次。再进来又有我点击是不是也有,那你看都可以啊,都可以好了。这个呢是使用绑定事件啊,可以的使用绑定时间,哎,还有哪些函数啊,哎,还有这个万,这个万也很有意思,就它能干嘛,它它使用上啊,大家注意看到它那么使用上跟but一样。
09:02
但是注意看哈,但是one方法绑定的事件只会响应一次,就是只响应一次就没了啊,很简单,两个用法一模一样啊,来简单点说,就是你把这个你都可以换成one,但是它只会处罚一次。你看one one的话就一次就绑定了什么这个click mouse over mouse out,看见了吗?但是大家注意啊,这三个事件他们只会响应一次,就每个事件只响一次,我给你演示一下,我先把上面这个住了啊,要不然上面这个单很有效率,来来别着急,M12啊进来一次,出去一次,再进来再出去是不行吗?点击也是只能响一次,我点了一次再也没有了,再点点点点点看见吧,就这样每个事间只响一次啊讲一次好了,那么接着讲on b吧,啊这个leave流之后啊,这个on b呢,就是大家去看到哈,跟B方法相反的操作,那知道啥意思了吗?你上面是绑定我呢,给你解除绑定,给你取消这个事件,能理解吗?哎,就是什么呢?解除事。
10:24
变的绑定就这样好,举个例子是啊,就比如说把这个住了,我上面呢,已经这个绑定了,Click Mo over Mo out是吧,然后可以取消啊,比如说你不需要的时候,我就可以取消啊点啊find,比如说你想取消哪个呀,Click是吗?那就click click好,这个时候点击就无效了,但是鼠标一入一出还行,能理解吧,来运行一下哈,我F12我进来出去,进来出去没问题是吧?那我现在点就没效果啊啊,这就没有效果了哈,好,当然你也可以移除多个啊,比如说多个怎么办?用空格隔开啊,Mouse over,你继续移除都可以的,那现在呢,就鼠标进来也不行了,来再刷新一次啊,进来是不是也不行了,那出去还行,看见吧,哎,进来不行,出去还行,OK啊,当然你也可以什么呢?
11:24
如果你什么都不传,他就都给你删除了,就什么事件都不管了,反正你让我删除吗?是吧,那什么删除我都给你删,你具体告诉我是哪个我就删具体的啊,不告诉我,那我也不知道删哪个都删了,就这样啊来注意看走进来出去点点点数都没效果啊,就这样就是跟B相反的操作啊,解除事件的绑定,那Le呢,它也是用来绑定事件。啊,也是用来绑定事件,但是它有一个很有意思的效果,跟忘是一样的,忘是不是只响应一次啊,它live呢,自己看啊,它可以用来绑定什么呢?选择器匹配的所有元素的事件,哪怕这个元素是后面动态创建出来的也有效,这这是啥意思?
12:27
这是啥意思?来,我给你演示一下哈,我给你演示一下,我先把这东西都注脚啊,现在做住脚,好我现在呢,把这个打开,这是干啥?这个是不是通过click这个方法给H5绑定它的事件,那现在呀,我在这里哈,我创建一个H,别着急啊,好大家看一下,我就是不创建一个H5啊,然后我创建好以后pen two我追加到哪里来,别着急啊,我去瞅一瞅啊,放在到这个pen里面来,看见了吗?把它也放进来,OK,那现在它是不是有两个H5啊,但是大家注意看一下,下面这个H5单一事件是不是有效了,而下面这个就无效了,为什么?这跟对,这跟咱们上午的时候讲的一样,那个。
13:28
动态添加长记录还记得吗?一开始的时候H5是不是只有一个,他只给这一个绑定了单机事件,然后面创建这个它无效。但是你要是用live去绑定呢,那就不是这个效果了,后面不管你怎么创建都有效啊,它会有这样的一个记录,你看看哈,就比如说记住啊,Live的使用是不是也是用来绑定事件的呀,跟B相关的操作差不多,所以呢,看这个代码,我现在给它注入掉,诶我在这个地方,我查到H处点live看见吧,我说click事件,然后function,我把这个拿过来。
14:15
看见吧,这是什么呢?就是使由live绑定的单机单机时间啊,那这个就是吧。啊好好,那这个时候注意看它是不是还是一样先绑定的,然后再从电脑,那会不会后面创建一个无效呢。来前面这个有效没问题吧,后面这个依然有效。这就是他的特点啊,这是它的特点,好这个呢,就是几块里面我们非常常用的一些事件处理方法。
我来说两句