「网易官方」极客战记(codecombat)攻略-网页开发2-点击-clickthrough

Posted codecombat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了「网易官方」极客战记(codecombat)攻略-网页开发2-点击-clickthrough相关的知识,希望对你有一定的参考价值。

技术图片
(点击图片进入关卡)

互动元素是网络的主旨!

简介

您可以使用 .on() 函数将事件绑定到某些元素。

element.on("click", functionName)

默认代码

<!-- 有可能使您的网站互动! -->
<!-- jQuery包含".on()" 来监视事件。 -->
<!-- 点击元素时发生 "click" 。 -->

 

<script>
    // 请记住只有javascript进入<script>标签内。
    // 这将按钮的文字颜色设置为"blue"”。
    var button = $("#theButton");

 

    // 该按钮被点击时,该功能将运行。
    function buttonClicked() {
        // 这将按钮的文字颜色设置为"blue"”。
        button.css("color", "blue");
        // 使用.css()设置按钮的 "background-color"

 

    }

 

    // ".on()" ”用于将事件挂接到元素。
    // 现在,按钮将运行按钮点击…
    // ...在"click"时发挥作用。
        button.on("click", buttonClicked);
</script>
<style>
    /* 记住只有CSS规则放在&tSyt>标签内 */
    body {
        text-align:center;
    }
    #theButton {
        width: 500px;
        height: 125px;
        font-size: 3em;
    }
</style>
<button id="theButton">我是按钮</button>
<!-- 请记住点击按钮以使更改发生 -->

概览

事件

事件是在网站使用过程中发生一些事情,例如按钮被点击的 "click" 事件、鼠标经过图片的 "mousemove" 事件等等。

我们可以使用 eventlistener (事件监听器)和这些事件进行"hook"(挂接)。jQuery有一系列工具,能让这些工作变得更加轻松。其中最简单的是 on() 函数。

对于任意元素, on() 会监听特定事件的发生,然后调用指派的 callback (回调)函数。

on(eventName, functionName)

on() 的结构很简单, on(eventName, functionName) 。 eventName 是一个字符串,是要监听的事件的名称。例如: "click" 、 "mousemove" 、 "keydown" 。 functionName 是你所创建的某个函数的名称。

var button = $("#theButton");
function thisIsAFunction() {
    // 这里面的代码只会在按钮被点击时执行。
}
button.on("click", thisIsAFunction);

注意第二个参数 functionName ,其后没有跟 () 。因为这里不是 calling (调用)函数。这里仅仅是告诉 on() 函数,在正确的时候应该调用什么函数。

点击 解法

<!-- 有可能使您的网站互动! -->
<!-- jQuery包含".on()" 来监视事件。 -->
<!-- 点击元素时发生 "click" 。 -->

 

<script>
    // 请记住只有JavaScript进入<script>标签内。
    // 这将按钮的文字颜色设置为"blue"”。
    var button = $("#theButton");

 

    // 该按钮被点击时,该功能将运行。
    function buttonClicked() {
        // 这将按钮的文字颜色设置为"blue"”。
        button.css("color", "blue");
        // 使用.css()设置按钮的 "background-color"
        button.css("background-color", "blue");

 

    }

 

    // ".on()" ”用于将事件挂接到元素。
    // 现在,按钮将运行按钮点击…
    // ...在"click"时发挥作用。
        button.on("click", buttonClicked);
</script>
<style>
    /* 记住只有CSS规则放在&tSyt>标签内 */
    body {
        text-align:center;
    }
    #theButton {
        width: 500px;
        height: 125px;
        font-size: 3em;
    }
</style>
<button id="theButton">我是按钮</button>
<!-- 请记住点击按钮以使更改发生 -->
 

本攻略发于极客战记官方教学栏目,原文地址为:

https://codecombat.163.com/news/jikezhanji-dianji

极客战记——学编程,用玩的!

以上是关于「网易官方」极客战记(codecombat)攻略-网页开发2-点击-clickthrough的主要内容,如果未能解决你的问题,请参考以下文章

网易官方极客战记(codecombat)攻略-森林-村庄守护者

网易官方极客战记(codecombat)攻略-森林-If 的盛宴

「网易官方」极客战记(codecombat)攻略-游戏开发2-越狱-jailbreak

「网易官方」极客战记(codecombat)攻略-森林-小心陷阱

网易官方极客战记(codecombat)攻略-森林-Else 之战elseweyr

「网易官方」极客战记(codecombat)攻略-网页开发2-转换-toggulation