博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript的实现事件的一些实例
阅读量:5982 次
发布时间:2019-06-20

本文共 1896 字,大约阅读时间需要 6 分钟。

               嘿嘿,今天学习到了事件,其实在C#中事件只需要我们触发即可实现,但是在javascript并不是这样的,在这里,事件是javascript与html的交互,就是文档或者浏览器窗口发生的一件特定的交互瞬间。其实从定义上面你很难想象吧,那么下面就简单的举例说下。

         一.实现文字改变位置

            

链接    文字

 

                      

                 上面的button就实现了onclick单击事件,然后通过事件调用了一个方法使其文本信息改变位置。

          二.替换文本信息

    

一个链接  一句话

                                     

                  其实在这里是替换文本信息,不局限于是原来的文本信息交换位置,可以是任意内容的,嘿嘿。

                   三..改变图片大小

    

加载中!

                                 

                 改变图片大小其实是通过元素的属性设置即可,或者通过获取其元素,在使用setAttribute也可以实现的,这样是最简单的。

         四.显示另一个元素的值

    

                 在这里写if'语句中的条件时间可能不太容易理解,但是我们可以寻找下pnode.childNodes的节点的个数即可知道我们的条件为什么要这样写,子节点的个数输出的是5,包括空白的文本节点等,所以在显示时间需要注意的。

                  五.克隆图片

    

加载中

                          

                   其实克隆图片,从名字上面的方法的名字cloneNode就知道了实现的功能,可以点击按钮克隆多张图片。

                   六.隐藏图片

    

加载中

                之前没有介绍display的使用方法,它应该是style的属性,在这里需要注意的是它的参数,仅仅存在none和空。

         七.文本信息排序

    
  • item1
  • item2
  • item3
  • item4
  • item5

                    在这里理解起来可能刚接触不太容易理解,但是我感觉之前学习了pop方法和push方法,其实这个就是那个理解起来相似,但是最后的显示的信息还是打不同的,仅限于理解上面,

           八.form表单

     
文本框:
单选框:
下拉列表:

 

 

                  在这里需要注意的获取form表单中的元素的value的使用和name的使用,实现单击事件可以写在html的外边,可以添加onload事件,可以使用上面的方法即可,嘿嘿。

          九.通过一个按钮触发事件获取另一个按钮触发事件

    

                     十.创建新元素

    

                       十一.通过页面加载事件打开一个网页

 

        

第一个DOM

 

                    十二.onfocus与onblur的使用

    
UserName
UserPwd

                   学习了这些实例,其实要自己直接写估计还是挺为难的,感觉还是不能自己写下来吧,不过我会更多的练习的,每次在学习做实例的时间都是非常兴奋,可以把前面学习的所有的很乱的知识使用上啦,感觉它终于有用啦,原来是实现这个功能的,就写到这里啦,发现过啦昨天好久啦,要睡觉啦,嘿嘿。

 

转载地址:http://mleox.baihongyu.com/

你可能感兴趣的文章
JAVA架构师那些事?
查看>>
Android NDK开发扫盲及最新CMake的编译使用
查看>>
Weex开发系列(一):初识Weex
查看>>
开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件
查看>>
找到思聪王
查看>>
iOS图片压缩上传
查看>>
企业级证书打包下载安装之后无法使用问题
查看>>
[译] 学习 Spring Security(五):重发验证邮件
查看>>
快速的React Native开发方法
查看>>
Spring核心系列之AOP(一)
查看>>
TiDB 源码阅读系列文章(十四)统计信息(下)
查看>>
TiDB 源码阅读系列文章(十五)Sort Merge Join
查看>>
spring mvc 5.1.1.RELEASE的一次请求过程源码分析
查看>>
RabbitMQ实战:消息通信模式和最佳实践
查看>>
省市区级联
查看>>
「译」MotionLayout介绍 (part III)
查看>>
什么是自编码?
查看>>
机器学习资料合计(一)
查看>>
系统学习iOS动画之五:使用UIViewPropertyAnimator
查看>>
实现Google带截图功能的web反馈插件
查看>>