JavaScript事件响应学习

最新推荐文章于 2024-03-07 11:00:19 发布

Alyces

最新推荐文章于 2024-03-07 11:00:19 发布

阅读量535

点赞数 1

分类专栏： Javascript(JS) jQuery 文章标签： javascript 鼠标

本文链接：https://blog.csdn.net/Alyces/article/details/53019780

版权

Javascript(JS) 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

1.onclick事件(鼠标点击触发)：

<script type="text/javascript">
  function alertMsg(){
    alert('欢迎学习JavaScript！');
  }
</script>

<body>
  <form>
    <input name="点击我" type="button" value="点击我"  οnclick="alertMsg()"/>
  </form>
</body>

2.onmouseover事件(鼠标滑过触发)：

<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>

<body>
     <form>
            密码:<input name="password" type="password" >
            <input name="确定" type="button" value="确定" οnmοuseοver="message()"/>
       </form>
</body>

3.onmouseout事件(鼠标移开触发)：

<script type="text/javascript">
    function message(){
      alert("千万不要拿开哦!"); }
</script>

<body>
<form>
  <a href="javascript:;" οnmοuseοut="message()">点击我</a>
</form>
</body>

4.onfocus事件(光标聚焦触发)：

<span style="font-size:18px;"> <script type="text/javascript">
    function message(){
	  alert("请选择，您现在的职业！");
	}
  </script></span>

<span style="font-size:18px;"><body>
  请选择您的职业：<br>
  <form>
    <select name="career" οnfοcus="message()"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body></span>

5.onblur事件(光标聚焦触发)：

<span style="font-size:18px;"><script type="text/javascript">
  function message(){
    alert("请确定已输入密码后，在移开!"); }
</script> </span>

<span style="font-size:18px;"><body>
  <form>
   用户:<input name="username" type="text" placeholder="请输入用户名！" >
   密码:<input name="password" type="text" placeholder="请输入密码！" οnblur="message()">
  </form>
</body></span>

6.onselect事件(内容选中触发)：

<span style="font-size:18px;"><script type="text/javascript">
  function message(){
    alert("您触发了选中事件！"); }
</script> </span>

<span style="font-size:18px;"><body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" οnselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body></span>

7.onchange事件(内容改变触发)：

<span style="font-size:18px;"><script type="text/javascript">
  function message(){
    alert("您改变了文本内容！"); }
</script></span>

<span style="font-size:18px;"><body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" οnchange="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body></span>

7.onload事件(数据加载时触发)：

<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>

<body οnlοad="message()">
  欢迎学习JavaScript。
</body>

Alyces

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录